html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
#root {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
font-family: SF Pro Display, sans-serif;
}
/* Content Container */
.content-container {
height: 77%;
display: flex;
flex: 1;
flex-direction: column;
}
.inner-content-container{
height: 100%;
width: 100%;
position: relative;
}
.MuiSnackbarContent-message{
word-break: break-word;
}
.pdfView{
height: 100%;
width: 80%;
float: right;
}
.for-reset-password{
background-color: #550703 !important;
}
.for-reset-password:hover{
background-color: #990804 !important;
}
@media (min-width: 1440px){
.content-container{
height: 80%;
}
.modal{
top: 8% !important;
}
}
@media (max-width: 1025px){
.content-container{
height: 75%;
}
}
@media (max-width: 960px){
.content-container{
height: 80%;
}
}
@media (max-width: 640px){
.content-container{
height: 78%;
}
}
@media (max-width: 480px){
.content-container{
height: 74%;
}
}
/* font-family */
@font-face {
font-family: SF Pro Display;
src: url(/d1f5e6e16dd4f75c3950.ttf);
font-display: swap;
}
@font-face {
font-family: Poppins-bold;
src: url(/9f0cd50bfdf6533c6cd2.ttf);
font-display: swap;
}
@font-face {
font-family: Poppins-extra-bold;
src: url(/827665571a9c05f84abd.ttf);
font-display: swap;
}
@font-face {
font-family: SF Pro Display Light;
src: url(/ebeabd4c89fc14beff0d.ttf);
}
@font-face {
font-family: Poppins;
src: url(/333cb30c20e31999802a.ttf);
}
@font-face {
font-family: Poppins-regular;
src: url(/35d26b781dc5fda684cc.ttf);
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(/8be2d1487420548b3b8d.ttf);
font-display: swap;
}
@font-face {
font-family: Open-Sans;
src: url(/f0cdede053a22b990af8.ttf);
}
/* Nav Bar */
.nav-container{
height: 100%;
float: left;
position: absolute;
top: 0px;
}
.nav-container , .side-navbar{
width: 20%;
}
/* Loader */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
z-index: 98;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: center;
align-items: center;
}
.loading-container-icon{
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
}
.lds-spinner-icon{
z-index: 1;
width: 22px;
height: 22px;
border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #75818a;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
position: absolute;
}
.lds-spinner {
z-index: 1;
width: 120px;
height: 120px;
border: 12px solid #f3f3f3; /* Light grey */
border-top: 12px solid #75818a;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
position: absolute;
}
/* Radio Input */
input[type="radio"]{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 50%;
width: 15px;
height: 15px;
border: 3px solid #fdfdfd;
background: #dadada 0% 0% no-repeat padding-box;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 5px;
cursor: pointer;
}
input[type="radio"]::after{
border: 3px solid #fdfdfd;
background: #448CCB 0% 0% no-repeat padding-box;
}
input[type="radio"]:checked{
border: 3px solid #fdfdfd;
background: #448CCB 0% 0% no-repeat padding-box;
}
/*Right Container*/
.right-container{
width: 100%;
overflow: auto;
float: right;
height: 90%;
}
.right-container > div:not(:last-child){
min-height: 91%;
width: 80%;
padding-left:15px;
padding-right: 15px;
padding-top: 2px;
float: right;
}
.right-container > div:not(:last-child){
height: auto;
}
@media screen and (max-width:768px) {
.right-container{
width: 100%;
}
.right-container > div:not(:last-child) {
width: 100%;
}
}
/* bread crums*/
.bread-crums{
font-family: Poppins, sans-serif;
font-size: 12px;
margin-left: -3px;
}
/* Modal overlay */
.modal{
width: 80%;
height: 90%;
position: fixed !important;
top: 10%;
right: 0;
background: rgba(49,49,49,0.8);
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 1025px){
.modal{
width: 100%;
height: 90% !important;
}
}
.modal-content-container{
background: #ffffff;
border-radius: 10px;
width: 70%;
height: 80%;
padding: 15px;
margin-bottom: 5%;
}
.modal-content {
width: 100%;
height: 100%;
overflow: auto;
}
.confirmation-modal{
font-family: Poppins-regular,sans-serif;
font-size: 20px;
height: auto;
width: 35%;
display: flex;
flex-direction: column;
align-items: center;
font-weight: bold;
padding: 30px 10px;
}
.confirmation-message{
margin-bottom: 30px;
text-align: center;
}
.confirmation-button-container{
display: flex;
justify-content: center;
}
@media (max-width: 960px) {
.confirmation-modal{
width: 50%;
}
}
@media (max-width: 480px){
.inner-content-container .MuiSnackbarContent-root{
flex-wrap: nowrap;
}
}
@media (min-width:1440px) {
.modal{
width: 84%;
height: 93%;
}
}
/*Input box */
.input-label {
font-size: 18px;
}
.common-input {
width: 100%;
border: none;
margin: 0 auto;
padding: 5px;
font-size: 0.95rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
background-color: #f5f5f5;
padding: 1rem;
}
.common-input:focus {
outline: none;
}
.snack-success > div{
background-color: #43a047 !important;
align-items: flex-start!important;
}
.snack-error > div{
background-color: #d32f2f;
align-items: flex-start!important;
}
.snackbar {
max-height: 84%;
overflow: auto;
display: flex;
}
.snackbar > div {
height: -webkit-fill-available;
overflow: auto;
}
/* checkbox */
input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
height:15px;
width: 12px;
border: 2px solid #333333;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::before,input[type="checkbox"]{
content:"";
background: white;
border-radius: 2px;
}
input[type="checkbox"]:checked::before{
content: '';
}
input[type="checkbox"]:checked::after{
content: '\2713';
font-weight: bold;
}
/* snack */
.snack-success > div{
background-color: #43a047 !important;
}
.snack-error > div{
background-color: #d32f2f;
}
.input-secondary{
border: none;
border-bottom: 1px solid #bbb;
height: 4px;
background-color: white;
padding: 9px 5px 9px 2px;
}
.bold::placeholder{
font-weight: bold;
font-size: 13px;
font-family: Open-Sans,sans-serif;
color: rgb(0, 0, 0);
letter-spacing: 1px;
}
.invalid-error{
border-bottom:2px solid #890804 !important;
}
.invalid-error::placeholder{
color:#890804 !important;
}
/* Button */
.button {
border: none;
}
.button {
border-radius: 8px;
border-style: none;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 18px;
font-weight: bold;
height: 40px;
line-height: 20px;
margin: 0;
outline: none;
padding: 10px 16px;
text-align: center;
width: 100%;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.primary {
background-color: #890804;
}
.secondary {
background-color: rgba(51, 51, 51, 0.05);
color: black;
}
.button .primary:hover,
.button .primary:focus {
background-color: #845edd;
}
.required-field{
font-weight: bold;
}
.bread-btn{
background-color: white;
color: black;
border: none;
}
ol{
list-style-type:none;
display: flex;
flex-wrap: wrap;
}
ol>li{
padding:4px;
}
ol>li button div{
font-family: Poppins;
font-weight: bold;
font-size: 12px;
}
.help-tip-ctr {
color: #606060;
font-size: 13px;
}
.content-ctr {
display: flex;
}
.help-tip-title{
font-size: 15px;
}
.help-tip-ctr li{
margin-left: 5px;
}
.custom {
margin-left: 10px;
}
.small-loader{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.loader-center{
margin-bottom: 11px;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
.nav-container{
width: 20%;
}
.right-container{
width: 100%;
}
ol>li button div{
font-weight: 600;
}
.right-container > div:not(:last-child) {
width: 100%;
}
}
@media (min-width:1440px) {
ol>li button div{
font-size: 14px;
}
.right-container > div:not(:last-child) {
width: 84%;
}
}
@media (max-width:1305px) {
.right-container > div:not(:last-child) {
min-height: 89%;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background: rgb(168, 167, 167);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #888686;
}
#pdfobject{
height: 100%;
}
@media screen and (min-width: 1400px) and (max-width: 2600px) {
.pdfView{
width: 84%;
}
}
@media screen and (height: 667px) {
.modal {
height: 90%;
}
}
@media screen and (min-height: 844px) and (max-height: 1024px) {
.modal {
height: 93%
}
}
@media screen and (min-height: 1360px) {
.modal {
height: 90%;
}
}
@media screen and (min-width: 750px) and (min-height: 810px) {
.modal-content-container {
height: auto;
}
}
@media screen and (max-width:520px) {
.content-ctr {
flex-direction: column;
}
.custom {
margin-left: 0px;
margin-top: 5px;
}
}
@-moz-document url-prefix() {
.side-navbar p,
.list-page-title,
#bold-text,
#bold-text p,
#bold-text label,
.table-title-container,
.card-selected,
.role-name-ctr label,
.server-configuration-container h5,
.server-configuration-container label,
.property-detail-card-section label,
.mustering-triggered-time,
.group-management-title,
.credentialText,
.modal-title,
.device-allocation-title,
.manage-device-details-title,
.manage-device-details-ctr label,
.role-form-description,
.roles-web-admin-permission-title,
.mustering-title,
.back-to-mustering-btn,
.current-result-1 div,
.add-mustering-location-title,
.add-mustering-location-label,
.event-title-input-box,
.create-alert-select-btn-container label,
.enable-description-label,
.group-filter-container-title,
#label-name,
.event-title,
.deployement-setup-configuration-title,
.deployment-checkbox-ctr,
.inactive-input-ctr span,
.alert-title,
.alert-display-radio-ctr label,
.alertToneTitle,
.audioTableCol1,
.add-new-icon-model-title,
.tone-label,
.mustering-event-history-title,
.mustering-event-history-selection-container
.mustering-event-history-selection-option,
.mustering-event-history-date-label,
.specific-even-top-content-title p,
.back-to-history button,
.label,
.dashboard-card,
.account-inner-form-title{
/* Firefox-specific styles */
-webkit-text-stroke: 0.6px;
font-weight: initial!important;
letter-spacing: 0.8px;
}
}
/* Landing Page */
/* Login Page */
.login-section {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: transparent
radial-gradient(closest-side at 50% 50%, #890804 0%, #550703 100%) 0% 0%
no-repeat padding-box;
overflow-y: auto;
}
.login-conatiner .forgot-password-link{
display: flex;
justify-content: flex-end;
}
.login-conatiner .remember-me-container{
display: flex;
justify-content: flex-end;
}
.login-conatiner {
background-color: white;
width: 345px;
box-shadow: 0px 20px 20px #00000014;
padding: 30px;
border-radius: 13px;
font-family: SF Pro Display;
}
.login-conatiner h1 {
text-align: center;
letter-spacing: 1px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 10px;
}
.login-conatiner label {
color: #acb1c0;
font-size:15px;
}
.login-conatiner input {
color: #1e2432;
border-radius: 6px;
}
.login-conatiner span {
font-family: Roboto, sans-serif;
color: red;
display: block;
margin-bottom: 5px;
height: 12px;
text-align: center;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
}
.show-password-text{
cursor: pointer;
}
.login-conatiner a {
text-decoration: none;
color: #1e2432;
display: flex;
justify-content: right;
font-size: 15px;
}
.login-conatiner button {
font-size: 15px;
letter-spacing: 1px;
color: #ffffff;
font-family: inherit;
font-weight: 700;
}
.login-conatiner .show-password input[type="checkbox"]{
margin-right: 5px;
}
.show-password{
font-size: 15px;
display: flex;
align-items: center;
}
.login-conatiner .remember-me-container {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 15px;
margin: 10px 0px;
margin-bottom: 20px;
}
.login-conatiner input[type="checkbox"] {
width: 16px;
height: 16px;
padding:0px;
border-radius:2px;
}
.login-conatiner .remember-me-container input[type="checkbox"] {
width: 16px;
height: 16px;
}
.login-conatiner .remember-me-container input {
margin: 0;
margin-left: 5px;
}
@media (max-width:1450px) {
.login-conatiner{
padding: 20px;
width:300px;
}
.login-conatiner input{
padding: 10px
}
}
@media (max-width: 750px) {
.login-conatiner {
margin: 30px auto;
}
}
@media (max-width: 480px) {
.login-conatiner {
width: 95%;
}
}
/* Forgot Password Page */
.forgot-password-section {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: transparent
radial-gradient(closest-side at 50% 50%, #890804 0%, #550703 100%) 0% 0%
no-repeat padding-box;
overflow-y: auto;
}
.forgot-password-container {
display: flex;
flex-direction: column;
background-color: white;
width: 345px;
box-shadow: 0px 20px 20px #00000014;
padding: 30px;
border-radius: 13px;
font: SF Pro Display;
}
.forgot-password-container .fogot-password-container-heading {
display: flex;
align-items: center;
justify-content: center;
}
.forgot-password-container h1 {
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 10px;
}
.forgot-password-container label {
color: #acb1c0;
font-size:15px ;
}
.forgot-password-container input {
margin-bottom: 10px;
border-radius: 6px;
}
.forgot-password-container p {
display: block;
margin-bottom: 10px;
height: 12px;
font-size: 15px;
}
.forgot-password-container .error-message {
font-family: Roboto, sans-serif;
color: red;
display: block;
margin-bottom: 5px;
height: 12px;
text-align: center;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
}
.forgot-password-container button {
margin-top: 70px
}
.forgot-password-container a {
text-decoration: none;
text-align: center;
margin-top: 10px;
color:#1E2432;
letter-spacing: 1px;
}
@media (max-width:1450px) {
.forgot-password-container{
padding: 20px;
width:300px;
}
.forgot-password-container input {
padding:10px
}
}
@media (max-width: 480px) {
.forgot-password-container {
width: 95%;
}
.forgot-password-container h1 {
font-size: 1.5rem;
}
}
/* Reset Password */
.reset-password-section {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent
radial-gradient(closest-side at 50% 50%, #890804 0%, #550703 100%) 0% 0%
no-repeat padding-box;
overflow-y: auto;
}
.reset-password-section h3 {
color: white;
text-align: center;
margin-bottom: 10px;
}
.reset-password-container {
width: 345px;
background-color: white;
box-shadow: 0px 20px 20px #00000014;
padding: 30px;
border-radius: 13px;
font-family: Sf Pro Display;
}
.reset-password-container h1 {
text-align: center;
margin-bottom: 10px;
letter-spacing: 1px;
font-weight: bolder;
}
.reset-password-container h4 {
text-align: center;
color: #acb1c0;
margin-bottom: 10px;
}
.reset-password-container .instruction {
color: #acb1c0;
font-weight: normal;
}
.reset-password-container label {
color: #acb1c0;
font-size: 15px;
}
.reset-password-container input {
margin-bottom: 10px;
border-radius: 6px;
}
.reset-password-container input[type="checkbox"]{
margin-bottom: 0px;
margin-right: 5px;
}
.reset-password-container a {
text-decoration: none;
margin-top: 10px;
color: #1e2432;
display: flex;
justify-content: center;
letter-spacing: 1px;
color:#1E2432;
}
.reset-password-container button {
letter-spacing: 1px;
margin-top: 5px;
}
.reset-password-container p {
margin: 0;
float: left;
font-weight: bold;
font-size: 15px;
display: block;
}
.message-box {
font-family: Roboto, sans-serif;
color:black;
display: block;
margin: 5px 0px 5px 0px;
text-align: center;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
height: 10px;
}
.password-error {
font-family: Roboto, sans-serif;
color:rgb(194, 37, 37);
display: block;
text-align: center;
font-size: 11px;
letter-spacing: 1px;
font-weight: bold;
}
.password-help-tip {
font-family: Roboto, sans-serif;
color:#7b7b7c;
display: block;
text-align: left;
font-size: 11px;
letter-spacing: 1px;
font-weight: bold;
}
.help-tip-error {
color:rgb(194, 37, 37);
}
@media (max-width:1450px) {
.reset-password-container{
padding: 20px;
width:300px;
}
.reset-password-container input {
padding:10px
}
}
@media (max-width: 480px) {
.reset-password-container {
width: 95%;
}
.reset-password-container h1 {
font-size: 1.5rem;
}
}
/* Header */
.header-container {
height: 10%;
background-color: #000000;
justify-content: space-between;
display: flex;
align-items: center;
width: 100%;
padding: 8px;
font-family: Poppins, sans-serif;
}
.header-container h2{
font-weight: normal;
}
.header-container .header-logo {
margin-left: 40px;
}
.header-container .header-title {
color: white;
position: absolute; /* new */
left: 50%;
transform: translateX(-50%);
}
.header-container .header-title h1 {
font-size: 28px;
}
.header-container .header-profile-container {
display: flex;
flex-direction: row;
align-items: center;
position: absolute; /* new */
right: 10px;
cursor: pointer;
}
.header-container .header-profile-container p {
color: white;
}
.header-container .header-profile-container img {
width: 32px;
height: 32px;
margin: 0px 10px;
padding: 1px;
border-radius: 50%;
margin-right: 0px;
}
.profile-viewer-btn{
color: white;
font-size: 20px;
}
.header-container .header-profile-container button {
background-color: transparent;
border-left: 0.5px solid white;
border-radius: 0;
width: auto;
padding: 0px 10px;
height: 26px;
}
.header-container .header-profile-container button:nth-last-child(1){
display: none;
}
.profile-header-ctr{
border-bottom: 1px solid rgb(207, 207, 207);
cursor: pointer;
}
.signout-header-ctr{
cursor: pointer;
}
.header-container .header-profile-container .header-pop-up-ctr{
display: block;
position: absolute;
background-color: rgb(255, 255, 255);
color: #000000;
position: absolute;
right: 4px;
width: 100px;
top: 30px;
border-radius: 8px;
font-size: 15px;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
z-index: 1;
padding:10px;
font-weight: bold;
}
.header-pop-up-ctr{
z-index: 902 !important;
}
@media (min-width: 1440px) {
.header-container .header-title h2 {
font-size: 30px;
}
.header-container {
height: 8%;
}
.right-container {
height: 92%;
}
}
@media (max-width: 1025px) {
.header-container .header-logo {
margin-left: 10px;
}
.header-container .header-logo img {
width: 10rem;
}
.header-container h1 {
font-size: 1.5rem;
}
}
@media (max-width: 980px) {
.header-profile-container p,
.header-profile-container button:nth-last-child(1){
display: none;
}
.header-container .header-logo {
display: none;
}
.header-container .header-profile-container button:nth-last-child(2){
display: block;
position: absolute;
background-color: rgb(255, 255, 255);
color: #000000;
position: absolute;
right: 4px;
width: 100px;
top: 30px;
height: 40px;
border-radius: 8px;
font-size: 15px;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
z-index: 1;
}
}
@media (max-width: 769px) {
.header-container .header-logo {
margin-left: 10px;
}
.header-container .header-logo img {
width: 8.5rem;
}
.header-container h1 {
font-size: 1.25rem;
}
}
@media (max-width: 560px) {
.header-container .header-logo {
margin-left: 5px;
}
.header-container .header-logo img {
width: 8rem;
}
.header-container h1 {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.header-container .header-logo {
display: none;
}
.header-container .header-title {
position: static;
left: 0;
transform: none;
margin: 0 auto;
}
.header-container .header-title h1 {
text-align: center;
}
}
@media (max-width: 350px){
.header-container .header-title h2{
font-size: 15px;
}
}
.footer-container {
color: white;
background-color: #35412c;
width: 100%;
font-family: Poppins, sans-serif;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 11px;
height: 9%;
letter-spacing: 1.5px;
padding: 6px;
align-items: center;
position: relative;
z-index: 99;
}
.logo-container{
display: flex;
justify-content: center;
height: 80%;
width: 100%;
}
.logo-container a{
height: 100%;
width: 100%;
}
.network-directory-logo-link{
width: 100%;
}
.footer-container .conatct-container .copyright-text{
text-align: left;
}
.footer-container .conatct-container div span img{
width: 9px;
vertical-align: baseline;
}
.footer-container .copy-right-container {
text-align: right;
display: flex;
flex-direction: column;
margin:0px 20px;
justify-content: space-evenly;
align-self: flex-end;
margin-top: 0.5%
}
.footer-container .copy-right-container div li small {
font-size: 12px;
display: flex;
}
.footer-container .copyright-txt .middle-content {
display: flex;
margin-bottom: 2%;
font-weight: bold
}
.footer-container .copyright-txt {
margin-top: 0.3%;
}
.footer-container .copyright-txt .middle-content {
margin-bottom: 2%;
}
.network-directory-ctr{
display: flex;
height: 100%;
width: 25%;
justify-content: flex-end;
}
.network-directory-logo-link{
align-items: center;
display: flex;
justify-content: flex-end;
margin-right: 10px;
height: 85%;
}
.network-directory-image{
height: 90%;
}
.network-directory-mobile-logo {
height: 70%;
cursor: pointer;
}
.footer-container .middle-content a {
text-decoration: none;
color: white;
}
.conatct-container{
width: 25%;
display: flex;
justify-content: flex-start;
flex-direction: column;
height: 100%;
margin-left: 1%;
}
.copyright-txt{
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
}
.middle-content{
display: flex;
justify-content: space-between;
}
.middlePortion{
height: 100%;
width: fit-content;
display: flex;
justify-content: center;
flex-direction: column;
justify-content: space-evenly;
}
.ssLogoImage{
height: 70%;
}
.copyright-text{
display: flex;
justify-content: center;
}
.version-divA{
display: flex;
justify-content: flex-start;
align-items: center;
}
.aTag{
display: flex;
align-items: center;
}
.aTag-mobile-logo, .copyright-text-mobile{
display: none;
}
.mobile-network-directory-logo-link{
display: none;
}
.network-directory-mobile-logo{
display: none;
}
.network-directory-logo-link{
margin-top: 1%;
}
@media screen and (min-width: 920px) and (max-width: 1025px) {
.copyright-txt{
width: 50%;
}
.network-directory-ctr{
width: 20%;
}
.network-directory-logo-link{
height: 85%;
width: 100%;
}
.network-directory-image{
max-width: -webkit-fill-available;
}
.ssLogoImage{
max-width: -webkit-fill-available;
}
}
@media screen and (min-width: 800px) and (max-width: 920px) {
.network-directory-ctr img{
max-width: -webkit-fill-available;
}
.ssLogoImage{
max-width: -webkit-fill-available;
}
.network-directory-image{
height: 80%;
}
}
@media screen and (min-width: 790px) and (max-width: 800px) {
.network-directory-ctr img{
width: 1;
height: 1;
}
.ssLogoImage{
height: 1;
width: 1;
}
}
@media screen and (min-width: 760px) and (max-width: 790px) {
.network-directory-ctr{
width: 20%;
}
.network-directory-ctr img{
height: 85%;
width: 95%;
}
.ssLogoImage{
height: 90%;
width: 100%;
}
}
@media screen and (min-width: 530px) and (max-width: 760px) {
.network-directory-ctr{
width: 20%;
}
.network-directory-ctr img{
width: 100%;
}
.ssLogoImage{
width: 100%;
}
.footer-container .copyright-txt .middle-content{
font-size: 9px;
}
}
@media screen and (min-width: 360px) and (max-width: 530px){
.copyright-txt{
width: 60%;
}
.network-directory-ctr{
width: 20%;
}
.conatct-container{
width: 20%;
}
.aTag-mobile-logo{
display: flex;
align-items: center;
}
.network-directory-mobile-logo{
display: flex;
height: 52%;
margin-top: 21%;
}
.copyright-text-mobile{
display: flex;
margin-top: 8%;
}
.mobile-network-directory-logo-link{
display: flex;
}
.footer-container .copyright-txt .middle-content{
font-size: 9px;
}
.footer-container .middlePortion{
width: 100%;
margin-left: 8%;
}
.version-divA {
font-size: 9px;
margin-top:2%;
}
.mobile-logo{
margin-bottom: 2%;
}
}
@media screen and (max-width: 530px){
.network-directory-logo-link, .copyright-text :first-child , .aTag{
display: none;
}
}
@media screen and (min-width: 360px) and (max-width: 400px){
.network-directory-mobile-logo {
height: 65%;
margin-top: 6%;
}
}
@media screen and (min-width: 320px) and (max-width: 1300px){
.footer-container {
height: 11%;
}
}
.page-not-found-container {
width: 100%;
height: 100%;
padding: 15px;
}
.page-not-found-inner-container {
display: flex;
box-shadow: 0px 0px 15px 5px #00000034;
height: 100%;
}
.page-not-found-text {
margin: auto;
padding-left: 4%;
width: 37%;
}
.page-not-found-img {
width: 60%;
display: flex;
align-items: center;
justify-content: center;
}
.page-not-found-title {
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #000060
}
.page-not-found-content {
margin-top: 6%;
font-size: 14px;
font-family: Poppins, sans-serif;
font-weight: 600;
color: #000060;
}
.page-not-found-btn {
margin-top: 8%;
}
.page-not-found-btn button {
background-color: #FE676E;
padding: 13px;
width: 30%;
border: none;
color: #ffffff;
border-radius: 25px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: Poppins, sans-serif;
}
.page-not-found-img img {
width: 80%;
}
@media(max-width:481px) {
.page-not-found-btn button {
width: 40%;
}
.page-not-found-btn button {
padding: 10px;
width: 30%;
}
.page-not-found-title {
font-size: 50px;
}
.page-not-found-content {
font-size: 12px;
}
}
@media(max-width:320px) {
.page-not-found-btn button {
width: 40%;
padding:7px
}
.page-not-found-title {
font-size: 50px;
}
.page-not-found-content {
font-size: 12px;
}
}
@media(max-width:960px) {
.page-not-found-inner-container {
flex-direction: column;
}
.page-not-found-text {
margin-top: 5%;
text-align: center;
width: 100%;
}
.page-not-found-img {
width: 100%;
margin-top: 3%;
text-align: center;
align-items: center;
}
.page-not-found-img img {
width: 70%;
margin-top: 2%;
}
.page-not-found-container {
overflow: auto;
}
.page-not-found-btn button {
width: 30%
}
}
@media (min-width:961px) and (max-width:1024px) {
.page-not-found-btn button {
width: 40%
}
}
.nav-container{
height: 100%;
}
.right-container{
width: 100%;
}
.signIn-button{
background-color: #550703 !important;
cursor: pointer;
display: inline-block ;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 1px;
}
.signIn-button:hover{
background-color: #990804 !important;
}
@media screen and (max-width:768px) {
.nav-container{
width: 0%;
}
.right-container{
width: 100%;
}
}
@media (min-width: 1025px) and (max-width:1440px){
.nav-container{
width: 20%;
}
.right-container{
width: 100%;
}
}
@media screen and (min-width:769)and (max-width:1024px) {
.nav-container{
width: 30%;
}
.right-container{
width: 70%;
}
}
.document-container {
width: 100%;
font-family: Open-Sans, sans-serif;
font-size: 13px;
margin-top: 11px;
}
.add-file-button{
width: fit-content !important;
}
.category-name button,
.file-edit-wrapper button,
.paginate-button button,
.files-edit-popup button,
.menu-category button,
.add-file-button{
all: unset;
}
.files-edit-popup {
background-color: #77787B;
width: 54px;
height: auto;
border: 1px solid #ccc;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 4px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
top: 0;
left: 35px;
z-index: 10;
transition: opacity 0.3s ease-in-out;
position: absolute;
}
.files-edit-popup-option {
color: #FFFFFF;
font-size: 12px;
font-family: SF Pro Display;
padding: 2px;
}
.header {
margin-bottom: 10px;
width: 100%;
font-family: Open-Sans, sans-serif;
color: #666666;
font-size: 15px;
}
.flex,.row-documents{
justify-content: center;
align-items: center;
}
.documents-search {
margin-top: unset !important;
width: unset !important;
}
.row-documents {
margin: 5px 0;
height: 27px;
}
.hover-reorder:hover{
visibility: visible;
cursor: url(/assets/reorder-icon.svg),auto;
}
.hover-reorder{
height: 20px;
width: 20px;
}
.cell {
padding: 10px;
align-items: center;
color: #555;
}
.files-edit-popup button:hover{
background-color: #a0a0a0
}
.created-by-container{
display: flex;
justify-content: center;
align-items: center;
width: 15%;
}
.toggle-button {
margin-right: 10px;
width: 15px;
height: 8px;
}
.rotate{
transform: rotate(180deg);
}
.children {
flex-direction: column;
margin-top: 10px;
}
.add-file {
margin-bottom: 10px;
margin-left: 20px;
font-family: Poppins-regular;
color: #333333;
}
.width-increase {
margin-left: 20px;
}
.menu-category {
width: 50%;
}
.reorder {
width: 8%;
justify-content: center;
}
.last-updated {
width: 25%;
justify-content: center;
}
.created-by{
width: 15%;
justify-content: center;
}
.created-by-container >.created-by {
width: 100%;
text-align: center;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-line;
word-break: break-word;
}
.manage-category {
width: 10%;
}
.icons-dimention{
width: 15px;
height: 13px;
margin-right: 10px;
}
.height-adjust{
height: 18px !important;
}
.add-file img{
width: 13px;
height: 13px;
}
.add-file img:nth-of-type(2) {
margin-right: 10px;
height: 18px !important;
margin-left: 5px;
}
.file-edit{
width: 16px;
height: 17px;
margin-left: 10px;
margin-right: 6px;
}
.file-edit-wrapper button{
width: 100%;
}
.reorder img{
width: 11px;
height: 11px;
}
.group-restriction{
width: 32px;
height: 16px;
}
.no-category-files{
margin-left: 26px;
}
.add-sub-category{
width: 13px;
height: 13px;
margin-left: 10px;
margin-right: 5px;
}
.file-edit-wrapper{
align-items: center;
position: relative
}
.category-name{
font-weight: bold;
font-size: 14px !important;
color: #555555;
}
.files-name{
color: #448CCB;
}
.files-name:hover,
.add-sub-category:hover,
.add-file:hover,
.file-edit:hover,
.files-edit-popup-option:hover,
.toggle-button:hover
{
cursor: pointer;
}
.buttons-wrapper,.button-and-pagination-wrapper,.file-edit-wrapper,.add-file,.children,.header ,.flex,.row-documents,.cell{
display: flex;
}
.button-and-pagination-wrapper{
justify-content: space-between;
}
.botton-pagination{
display: flex;
justify-content: end;
margin-bottom: 20px;
margin-top: 20px;
}
.doc-table-font{
font-size: 14px;
}
.category-name-wrapper{
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-line;
word-break: break-word;
}
.restrict-pointer{
pointer-events: none;
}
.category-table {
margin-top: 2%;
margin-bottom: 3%;
}
.reorder-btn{
display: flex;
margin-left: 2%;
}
.file-preview-model, .delete-file-model {
z-index: 1;
}
@media (min-width: 300px) and (max-width: 800px) {
.button-and-pagination-wrapper{
flex-direction: column !important;
}
.doc-table-font{
margin-top: 10px;
justify-content: end;
}
.reorder-btn{
margin-top: 2%;
margin-left: 0;
}
}
@media(max-width: 600px) {
.last-updated,.created-by,.reorder{
display: none !important;
}
.menu-category{
width: 74%;
}
.reorder{
width: 10%;
}
.manage-category{
width: 15%;
}
}
.dropdown {
width:80%;
position: relative;
user-select: none;
cursor: pointer;
}
.dropdown .dropdown-btn{
padding:10px;
background-color: #ffff;
font-weight: bold;
color: #333;
display: flex;
justify-content: space-between;
color: #222B45;
font: normal normal bold 12px/20px Poppins;
}
.dropdown .validDropdown{
border:1px solid #EDF1F7;
}
.dropdown .inValidDropdown{
border:1px solid #890804;
}
.invalidSelectItem{
color:#890804 !important;
}
.selected-color-box{
width: 15px;
height: 15px;
border-radius: 50%;
}
.dropdown .dropdown-content{
max-height: 250px;
overflow-y: auto;
z-index: 1;
position: absolute;
padding:10px;
background: #fff;
box-shadow: 3px 3px 10px 6px rgba(0,0,0,0.06);
color:#333;
width: 100%;
border-radius: 5px;
font: normal normal medium 15px/28px SF Pro Display;
}
.dropdown .dropdown-content .dropdown-item{
padding:5px;
cursor: pointer;
transition: all 0.2s;
display: flex;
}
.dropdown .dropdown-content .dropdown-item:hover{
background: #E8E7E7;
}
.dropdown-content .dropdown-item img {
width:22px;
height: 22px;
}
.select-box-icon{
width:22px;
height: 22px;
}
.inner-padding{
padding-left: 12px;
overflow: hidden;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all
}
.selected-item{
display: flex;
align-items: center;
}
.selected-value{
padding-left:12px;
word-break: break-all;
}
.drop-down-arrow{
width:70%;
}
.drop-down-arrow-rotation{
width:70%;
transform: rotate(180deg);
}
.select-box-value{
margin-left:12%;
margin-right:7%;
text-align:left;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.circle {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
}
.manage-icons-ctr {
display: flex;
height: 25px;
}
.dropdown-item {
flex-direction: row;
}
.dropdown-item button{
all: unset;
}
.options-list {
display: flex;
width: 100%;
align-items: center;
}
.data-update-delete-icon {
width: 20px;
height: 25px;
cursor: pointer;
color: #77838F;
}
.category-dropdown {
height: 30px !important;
padding: 4px !important;
border: 1px solid #bbbb !important;
border-radius: 1px;
box-shadow: 0px 0px 4px #00000040;
}
.dropdown-tree{
font-size: 13px;
}
.dropdown-tree img{
width: 13px !important;
}
.dropdown-content button{
all: unset;
}
.dropdown-content input{
color: black;
border: 2px solid #bbbb;
font-size: 13px;
height: 25px;
border-radius: 7px;
padding: 3px 5px;
width: 100%;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
padding-right: 30px;
}
.add-new-icon-model{
width: 75%;
height:100%;
}
.add-new-icon-modal {
z-index: 1;
width: 60%;
height: auto;
max-height: 95%;
position: absolute;
top: 10%;
left:20%;
display: flex;
align-items: center;
justify-content: center;
}
.add-new-icon-modal-content-container {
background: #FFFFFF;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.add-new-icon-model-container{
padding: 5px;
}
.add-new-icon-model-title{
padding: 5px;
font-size: 13px;
font-weight: bold;
}
.add-new-icon-model-icon-label{
padding:5px;
margin-top: 2%;
}
.add-new-icon-model-icon-label label{
font-size: 13px;
font-weight: bold;
}
.add-new-icon-model-icon-input-box{
border: none;
outline: 0;
margin-left:2%;
border-bottom: 2px solid #00000034;
width: 79%;
font: normal normal normal 14px/20px Open-Sans;
color: #333333;
}
.file-adding-container{
display: flex;
margin-top: 2%;
margin-left: 1%;
}
.file-box{
width:57%;
}
.no-file-option{
font-size: 12px;
margin-top: 2%;
margin-left: 1%;
}
.selected-img{
width:50%;
float: left;
text-align: center;
margin-top:10%;
}
.selected-img .previewimg{
width:20%;
}
.responsive-seleted-image{
display: none;
}
.image-restriction{
width: 50%;
float: right;
padding-left: 40px;
padding-bottom: 0px;
margin-top:2%;
font-family: Open-Sans,sans-serif;
font-size: 13px;
}
.image-restriction .img-type{
font-size:12px;
font-weight: bold;
color: #000000;
}
.image-restriction .img-type-restriction{
color: #555555;
margin-top:2%;
}
.add-icon-cancel-btn{
width: 30%;
font-size: 12px;
border-radius: 5px;
margin-left: 5px;
margin-bottom: 0px;
color: #000;
background-color: #FFFFFF;
text-align: right;
}
.add-icon-btn-container .add-icon-submit-btn{
width: 45%;
background-color: #448CCB;
font-size: 12px;
border-radius: 5px;
margin-left: 5px;
margin-bottom: 0px;
color: #FFFFFF;
font: normal normal normal 13px SF Pro Display;
}
.inputfile{
display: none;
}
.add-icon-error-msg{
text-align: center;
width:100%;
padding: 5px;
justify-content: center;
display: flex;
}
@media only screen and (min-width:320px) and (max-width:480px){
.add-new-icon-modal{
justify-content: flex-start;
width: 100%;
left:10%;
top:5%;
}
.add-new-icon-model{
width:81%;
}
.add-new-icon-modal-content-container{
overflow: auto;
}
.file-adding-container .file-box{
width:60%
}
.image-restriction{
width:100%;
float: left;
padding-left: 0%;
}
.selected-img{
display: none;
}
.selected-img-responsive{
height:30%;
text-align: center;
}
.add-new-icon-model-icon-input-box{
width:100%;
margin-left: 0%;
}
.file-box{
width:50%
}
.add-icon-submit-btn{
width: 50%;
}
.no-file-option{
display: none;
}
.responsive-seleted-image{
display: block;
}
.responsive-seleted-image .previewimg{
width:10%;
}
.responsive-seleted-image{
display: block;
text-align: center;
margin:5%;
}
.responsive-seleted-image .previewimg{
width:20%;
}
}
@media only screen and (min-width:481px) and (max-width:768px){
.add-new-icon-modal-content-container{
overflow: auto;
};
.file-box{
width:70%
}
.image-restriction{
width:100%;
float: left;
padding-left: 0%;
}
.selected-img{
display: none;
}
.selected-img-responsive{
height:30%;
text-align: center;
}
.no-file-option{
display: none;
}
.add-new-icon-model .add-new-icon-model-container .add-icon-btn-container{
padding-bottom: 1%;
}
}
@media only screen and (min-width:481px) and (max-width:768px){
.add-new-icon-modal-content-container{
overflow: auto;
}
.add-new-icon-model-icon-input-box{
width:100%;
margin-left: 0%;
}
.add-new-icon-modal{
width:69%;
left:15%
}
.responsive-seleted-image{
display: block;
text-align: center;
margin:5%;
}
.responsive-seleted-image .previewimg{
width:20%;
}
}
@media only screen and (min-width:769px) and (max-width:990px){
.add-new-icon-modal-content-container{
overflow: auto;
}
.add-new-icon-model{
width: 100%;
height:70%
}
}
@media only screen and (min-width:990px) and (max-width:1024px){
.add-new-icon-modal-content-container{
overflow: auto;
}
.add-new-icon-modal{
}
}
@media(min-width:1440px) {
.add-new-icon-modal{
width:50%;
left:25%;
height:max-content
}
}
.card-cotainer{
display:flex;
font-family: Open-Sans,sans-serif;
}
.item-listing-box{
border: 1px solid #00000027;
transition: 0.3s;
width: 100%;
height: 250px;
border-radius: 10px;
}
.card-container .item-listing-box .card-container-head{
display: flex;
padding:10px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.select-header{
background-color: #448CCB;
}
.deselect-header{
background-color: #000000;
}
.card-container-title{
color: white;
font-family: Open-Sans,sans-serif;
font-size: 13px;
}
.card-select-box{
color: white;
font-family: Open-Sans,sans-serif;
font-size: 13px;
display: flex;
margin-left: auto;
align-items: center;
}
.card-select-box input[type="checkbox"]{
width: 15px;
height: 15px;
font-size: 10px;
border: 1px white solid;
}
.card-select-box label{
padding-right:5px;
}
.card-select-box .select-box-color{
width:20px;
height:20px;
border: 2px solid white;
background-color:#448CCB;
color:white
}
.card-select-box .deselect-box-color{
width:20px;
height:20px;
border: 2px solid white;
background-color: #000000;
color:white
}
.card-filter {
padding: 5px;
background-color: white;
border-bottom: 1px solid #00000027;
}
.card-filter img{
margin-left:2%;
margin-top: 2%;
width:20px
}
.filter-container{
display:flex;
}
.card-filter input[type="search"]{
margin-left: 2%;
margin-top: 1%;
width:88%;
height: 30px;
border: 1px solid #E8E7E7;
border-radius: 7px;
padding:10px;
font-family: inherit;
}
.card-filter input[type="search"]::placeholder{
padding-left: 6px;
font: normal normal medium 14px/28px SF Pro Display;
}
.card-container .item-listing-box .list-item-container{
overflow: auto;
}
.list-item-container select{
border:none;
outline: none;
overflow: auto;
width:98%;
background:none;
}
.card-data-list .user-list-row,.filter-card-data-list .user-list-row{
cursor: pointer;
padding: 5px;
margin-bottom: 2px;
font-family: Open-Sans,sans-serif;
font-size: 13px;
}
.list-item-container select[multiple] option:checked {
background: #707070 linear-gradient(0deg, #707070 0%, #707070 100%);
color: white;
}
.filter-card-data-list{
padding: 10px;
overflow: auto;
margin: 0px;
width: 100%;
border: none;
border-radius: 0px;
height: 76%;
}
.filter-card-data-list:focus{
outline: 0px;
}
.filter-card-data-list::-ms-expand {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.list-items{
font-weight:normal;
font-size:12px;
padding:2px;
margin-left:2%;
font-family: Open-Sans,sans-serif;
cursor: pointer;
}
.list-item-container input[type="checkbox"]{
display: none;
}
.card-data-list{
overflow: auto;
padding: 10px 5px;
height: 62%;
width: 100%;
border: none;
margin: 0px;
}
.card-data-list:focus{
outline:0px
}
select[multiple] option:checked {
background: rgb(134, 127, 127) linear-gradient(0deg, rgb(126, 124, 124) 0%, rgb(102, 102, 102) 100%);
color: white;
}
select[multiple]{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
}
select[multiple]::-ms-expand {
display: none;
}
.card-container{
width: 100%;
}
.card-data-list-mobile{
display: none;
}
.card-list-mobile, .filter-list-mobile {
display:none;
}
@media(max-width:320px){
.item-listing-box{
height: 250px;
}
.card-container .item-listing-box .card-container-head{
height:18%
}
}
@media (max-width: 1024px){
.card-data-list, .filter-card-data-list{
display: none;
}
.card-list-mobile, .filter-list-mobile {
display: block;
}
}
@media (max-width: 480px){
.item-listing-box{
width: 96%;
}
}
.category-details-block{
height: 53%;
}
.add-category-modal-content {
display: flex;
flex-direction: column;
}
.category-name-container {
display: flex;
flex-direction: column;
width: 50% !important;
margin-top: 1%;
}
.category-name-container input{
border: 1px solid #bbbb;
border-radius: 1px;
box-shadow: 0px 0px 4px #00000040;
margin: 0;
background-color: white;
}
.restrict-groups-checkbox{
margin-top: 2%;
width: 100%;
align-items: flex-start !important;
color: #000000;
}
.category-group-management-container{
margin-top: 0 !important;
}
.restrict-groups-checkbox-txt{
width: 70%;
font-weight: lighter;
color: #606060;
}
.restrict-groups-checkbox span{
margin: 5px 5px 5px 5px !important;
}
.category-cards-title{
margin-top: 0 !important;
}
.group-management-card-container {
display: flex;
}
.category-filter-container{
width: 42% !important;
}
.category-container{
height: 125%;
display: flex;
flex-direction: column;
padding-left: 1px;
}
input[type="file"]::file-selector-button {
background-color: #448CCB;
color: white;
border: none;
height: 30px;
}
.file-upload-ctr{
width: 50%;
}
.file-upload-ctr input{
border: 1px solid #bbbb;
width: 85%;
border-radius: 1px;
margin-top: 6%;
box-shadow: 0px 0px 4px #00000040;
}
.preview-header{
display: flex;
margin-bottom: 1%;
align-items: center;
}
.left-element{
flex: 1;
text-align: left;
letter-spacing: 0.5px;
-webkit-line-clamp: 1;
display: -webkit-box;
line-clamp: 1;
word-break: break-word;
-webkit-box-orient: vertical;
width: -11%;
overflow: hidden;
}
.right-element{
flex: 1 1;
cursor: pointer;
align-items: center;
display: flex;
justify-content: flex-end;
gap: 7px;
}
.right-element img{
height: 30px;
}
.right-element button{
all: unset;
cursor: pointer;
}
.middle-element{
display: flex;
gap: 5px;
background-color: #ffffff;
border-radius: 2%;
box-shadow: 0px 0px 4px #00000040
}
.download-icon{
cursor: pointer;
filter: brightness(0) invert(0);
height: 20px !important;
}
.image-preview{
width: 100%;
height: 90%;
padding: 2%;
overflow: auto;
}
.image-preview img{
width: 100%;
height: 100%;
object-fit: contain;
}
.image-preview iframe{
width: 100%;
height: 100%;
border: none;
background-color: white;
overflow: hidden;
object-fit: contain;
}
.rpv-core__inner-pages{
overflow: auto;
scrollbar-width: "none";
-ms-overflow-style: "none";
}
.file-preview-model {
overflow: hidden;
height: 80% !important;
}
.rpv-core__inner-pages::-webkit-scrollbar {
display: none;
}
#label-name{
font-size: 13px !important;
letter-spacing: 0.5px !important;
}
.zoom-controls p{
font-size:13px;
font-weight: bold;
background-color: #ffffff;
color: #000000;
padding: 3px 3px;
border-radius: 3px
}
.zoom-controls{
display: flex;
gap: 7px;
align-items: center;
height: 30px;
}
.zoom-controls button{
width: 23px;
height: 23px;
border-radius: 50%;
background-color: #ffffff;
color: #000000;
font-size: 20px;
border: none;
cursor: pointer;
}
.add-category-modal{
z-index: 1;
height: 84%;
width: 71%;
}
.restrict-event{
opacity: 0.6 !important;
}
.category-modal{
z-index: 1;
}
@media (min-width: 2100px){
.add-category-modal{
height: 65%;
width: 50%;
}
.category-button-container{
margin-top: 2%
}
.category-details-block{
height: auto;
}
.category-modal-title{
height: auto;
}
}
@media (min-width: 1440px) and (max-width:2000px) {
.category-details-block{
height: auto;
}
.category-modal-title{
height: auto !important;
}
}
@media (max-width: 330px) {
.category-details-block{
height: 20%;
}
.category-container{
height: 230%;
}
}
@media (min-width: 330px) and (max-width: 640px) {
.category-container{
height: 930px;
}
.category-details-block {
height: auto;
}
.category-name-container{
width: 100% !important;
}
.category-name-container input{
width: 98%
}
.category-filter-container{
width: 100% !important;
}
.category-dropDown{
width: 98% !important;
}
.response-container {
margin-top: 3%;
}
.file-upload-ctr{
width: 100%;
}
.file-upload-ctr input{
width: 98%;
}
}
@media (min-width: 640px) and (max-width: 1400px) {
.category-container {
height: 600px;
}
.category-details-block {
height: auto;
}
}
@media (min-width: 760px) and (max-width: 1030px) and (min-height: 800px) and (max-height: 1400px){
.add-category-modal {
height:auto;
}
.category-details-block {
height: auto;
}
.category-container {
height: 565px;
}
}
@media (min-width: 1440px) {
.category-modal{
height: 92%;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.model-content {
overflow: auto;
width: 100%;
max-height: 100%;
height: 100%;
}
.heading {
margin-bottom: 1%;
font-size: 16px;
}
.add-event-section {
width: 37%;
padding: 0.5%;
}
.event-field-ctr {
display: flex;
flex-direction: column;
font-family: Open-Sans, sans-serif;
margin-bottom: 3%;
}
.event-input-field {
margin: 1% 0% 0% 1%;
width: 85%;
border: 1px solid #B1B4AA;
height: 30px;
box-shadow: 0px 0px 1px #707070;
padding: 0% 2% 0% 2%;
font-family: Open-Sans, sans-serif;
border-radius: 4px;
}
.warn-msg {
border: 1px solid #890804 !important;
}
.warn-msg input:focus {
outline: none;
}
.description {
height: 107px;
padding: 2%;
resize: none;
color: black;
}
.description::placeholder {
position: absolute;
top: 0;
left: 0;
padding: 2%;
}
.event-field-ctr input::placeholder {
font-weight: bold;
}
.event-field-ctr input[type="text"] {
color: black;
}
textarea::placeholder {
font-weight: bold !important;
}
.modal-content-container-add-events-ctr {
background: #ffffff;
border-radius: 10px;
width: 85%;
height: 78%;
padding: 15px;
margin-bottom: 5%;
}
.instruction {
font-family: Open-Sans, sans-serif;
font-size: 13px;
color: #555555;
margin: 0% 0% 3% 0%;
}
.event-date-ctr {
display: flex;
flex-direction: row;
font-family: Open-Sans, sans-serif;
font-weight: bold;
font-size: 14px;
margin-left: 2% !important;
margin-bottom: 3%;
position: relative;
}
.eventdate {
width: 269px !important;
height: 286px !important;
}
.event-register-radio-ctr {
width: 100%;
border: none;
font-family: Open-Sans, sans-serif;
font-weight: bold;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.event-registration-ctr button{
width: 80%;
}
.calenderIcon {
width: 100%;
height: 100%;
}
.copy-icon {
cursor: pointer;
z-index: 1 !important;
width: 100%;
}
.event-url-ctr button{
width: 6%;
margin-left: 2%;
display: flex;
}
.empty-button-display{
display: flex!important;
}
.date-field {
display: flex;
flex-direction: row;
width: 40%;
padding-left: 2%;
border: 1px solid #B1B4AA;
border-radius: 4px;
height: 30px;
cursor: pointer;
}
.events-calender{
width: 13%!important;
}
.calender-div-button{
position: absolute!important;
width: 269px !important;
height: 286px !important;
z-index: 10!important;
margin-top: 8%!important;
}
.calender-div-button div{
position: unset;
}
.date-field input::placeholder{
font-weight: bold;
}
.end-date {
margin-left: 3% !important;
}
.event-time-pickers {
display: flex;
flex-direction: row;
align-items: center;
font-family: Open-Sans, sans-serif;
font-weight: bold;
font-size: 14px;
margin-left: 2% !important;
margin-bottom: 3%;
width: 90%;
}
.start-time-picker {
margin-right: 0%;
width: 50%;
}
.end-time-picker {
margin-left: -3%;
width: 50%;
}
.event-registration-ctr {
display: flex;
flex-direction: row;
width: 50%;
margin-left: -5%;
margin-bottom: 3%;
}
.event-register-radio {
color: #333333;
font-size: 14px;
}
.event-url-ctr {
display: flex;
align-items: center;
}
.event-url-ctr img {
margin-left: 2%;
cursor: pointer;
}
.url-label {
font-size: 14px;
font-family: Open-Sans, sans-serif;
color: #555555;
}
/*QR-css*/
.qr-url {
width: 69%;
margin-left: 2%;
font-weight: normal !important;
}
.qr {
width: 77%;
margin-bottom: 50%;
}
.qr-code {
height: 30% !important;
width: 30% !important;
margin-right: 3%;
margin-left: 3%;
}
.qr-div {
display: flex;
align-items: flex-start;
margin-top: 8%;
}
/* error-msg */
.error-msg {
color: #890804;
position: absolute;
top: -30px;
left: 0;
width: 100%;
text-align: center;
font-size: 14px;
font-weight: bold;
}
/* buttons */
.manage-events-btn {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
position: relative;
}
.event-date-input {
width: 80%;
border: none;
font-family: Open-Sans, sans-serif;
cursor: pointer;
color: black;
}
.event-date-input:focus {
outline: none;
}
.limit-msg {
margin-top: 2%;
text-align: right;
margin-right: 15%;
color: #555555;
font-family: Open Sans, sans-serif;
font-size: 12px;
}
.form-div {
display: flex;
flex-direction: row;
height: 654px;
justify-content: space-between;
}
.galleryDiv {
display: flex;
flex-direction: column;
width: 60%;
margin-top: 0.5%;
}
.imageContainer {
height: 50%;
}
.docsContainer {
height: 30%;
}
.event-title {
font-family: Open-Sans, sans-serif;
font-weight: bold;
font-size: 14px;
margin-bottom: 2%;
}
.add-files-icon img {
height: 120px;
width: 98%;
padding: 2% 2% 2% 0%;
margin-right: 2%;
margin-left: -3%;
cursor: pointer;
}
.image-content-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
grid-template-rows: repeat(auto-fill, minmax(50%, 3fr));
height: 79%;
width: 100%;
}
.document-content-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25%, 0fr));
grid-template-rows: repeat(auto-fill, minmax(50%, 3fr));
height: 70%;
}
.previewimgGallery {
height: 120px;
width: 98%;
padding: 9% 5% 9% 0%;
}
.pdf {
width: 60%;
margin-left: 20%;
}
.word {
width: 49%;
margin-left: 18%;
}
.middle {
justify-content: space-around !important;
margin-top: 1%;
}
.preview p {
margin-top: -10px;
color: #333333;
font-family: 'Open-Sans';
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 96%;
}
.icon-container svg {
width: 17px;
height: 19px;
}
.deleteImageIcon img {
width: 17px;
height: 15px;
}
.gallery-icon-div {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 10%;
position: absolute;
top: 19px;
right: 0px;
color: white;
width: 36px;
cursor: pointer;
}
.dark {
color: #555555;
margin-left: 3%;
}
.event-file-import {
width: 40%;
z-index: 901;
padding: 15px 15px 15px 25px;
}
.copy-message {
position: relative;
top: 10%;
left: 15%;
transform: translate(-50%, -50%);
background-color: black;
color: white;
padding: 2px 9px;
border-radius: 5px;
z-index: 9999;
opacity: 0.9;
}
.img-column {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 3%;
}
.modal-indexed{
z-index: 901;
}
@media (max-width: 330px){
.add-files-icon img {
height: 66px;
}
.copy-icon {
display: none;
}
.download {
display: block !important;
}
.qr-url {
width: 86% !important;
}
}
@media (max-width: 960px){
.previewimgGallery {
height: 71px;
padding: 2% 5% 9% 0%;
}
.gallery-icon-div {
top: 4px
}
.add-files-icon img {
height: 66px;
}
.imageContainer {
height: 33%;
}
.modal-content-container-add-events-ctr{
height: 71%;
}
.eventdate {
margin-left: -14% !important;
}
.flip {
margin-left: -21% !important;
}
.copy-icon,.table-copy-icon {
display: none;
}
.download {
display: block !important;
}
}
@media (max-width: 550px) {
.form-div {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
}
.copy-icon,.table-copy-icon {
display: none;
}
.download {
display: block !important;
}
.qr-url {
width: 86% !important;
}
.add-event-section {
width: 100%;
}
.event-input-field {
width: 96%;
}
.date-field {
width: 43.5%;
}
.event-time-pickers {
width: 98%;
}
.limit-msg {
margin-right: 3%;
}
.eventdate {
margin-left: -8% !important;
}
.flip {
margin-left: -21% !important;
}
.image-content-container,
.document-content-container {
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
grid-template-rows: repeat(auto-fill, minmax(50%, 1fr));
height: 245px;
}
.imageContainer{
height: 49%;
margin-left: 1%;
}
.galleryDiv {
width: 97%;
}
.middle {
flex-direction: row;
margin-bottom: 11%;
}
.previewimgGallery {
height: 131px;
width: 90%;
padding: 10px 0px 23px 0px;
}
.add-files-icon img{
height: 84%;
margin-top: 5%;
}
.gallery-icon-div {
top: 12px;
right: 2px;
}
.preview p {
margin-top: -26px;
margin-left: -2%;
}
.event-file-import {
width: 90%;
}
.error-msg{
position: unset;
margin-bottom: 3%;
}
.middle{
justify-content: center !important;
}
}
@media (min-width: 1440px){
.previewimgGallery {
padding: 4% 5% 5% 0%;
width: 85%;
}
.event-file-import {
width: 26%;
}
.preview p {
margin-top: -14px;
margin-left: -6%;
}
.gallery-icon-div {
right: 25px;
}
.qr-code {
padding: 2%;
margin-top: -3%;
}
.add-files-icon img {
margin-left: -18px;
}
}
@media (min-width: 1990px){
.previewimgGallery {
padding:2% 5% 2% 0%;
width: 85%;
}
.form-div {
height: 761px;
}
.preview p {
margin-top: -6px;
margin-left: -6%;
}
.gallery-icon-div {
right: 25px;
}
.qr-code {
padding: 2%;
margin-top: -3%;
}
.add-files-icon img {
margin-left: -18px;
}
}
@media (max-width: 860px) {
.pdf {
margin-left: unset;
}
}
.dashboard {
height: 100%;
width: 100%;
overflow: auto;
}
.page-title{
margin-bottom: 6px;
font-size: 14px;
font-family: Open-Sans,sans-serif;
font-weight: bold;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: auto;
}
.margin-left-12{
margin-left: 12px;
}
.card {
width:20%;
height: 380px;
display: flex;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 13px;
margin: 10px;
padding: 5px 20px;
align-self: normal;
flex-direction: column;
align-items: center;
padding-bottom: 25px;
justify-content: space-between;
}
.card h1 {
font-size: 1.8rem;
margin: 10px 0;
}
.card .user_icon{
height: 27%;
}
.card .group_icon {
height: 27%;
}
.card p {
font-family: SF Pro Display, sans-serif;
color: #1E2432;
font-size: 13px;
}
.label-alighn-container{
display: flex;
align-items: flex-start;
}
.required-symbol{
color: #000;
font-weight: bold;
}
.row .card .add_usr_btn {
background-color: #82BA50;
}
.add_usr_btn, .add_group_btn, .add_system_btn {
width: 90%;
}
.common-button, .cancel-button, .save-button, .role-save-button, .large-button, .signIn-button, .no-event-button, .small-button, .download_btn, .import-button{
background-color: #224767;
border: none;
color: white;
text-align: center;
width: 180px;
min-width: fit-content;
padding: 12px;
text-decoration: none;
font-size: 13px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
font-family: Open-Sans,sans-serif;
margin-right: 15px;
}
.import-button, .download_btn{
padding : 7px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.import_icon{
height: 27px;
margin-left: 10px;
}
.button_parent_div{
display: flex;
flex-direction: row;
}
.common-button:hover, .save-button:hover, .small-button:hover, .large-button:hover, .no-event-button:hover, .role-save-button:hover, .download_btn:hover, .import-button:hover{
background-color: #448CC9
}
.user_batch_import{
width: 120px;
}
.small-button{
margin-right: unset;
height: fit-content;
width: fit-content;
padding: 5px;
}
.help-tip {
font-size: 11px;
color: #333333;
}
.highlighting{
color: #890804;
font-weight: bold;
}
@media screen and (max-width:600px) {
.card{
min-width:50%
}
}
@media (max-width: 768px) {
.dashboard {
width: 100%;
}
.card {
flex: 1 1 5rem;
margin: 10px 10px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.dashboard {
height: 83%;
width: 100%;
}
.card {
flex: 1 1 5rem;
min-width: 30%;
}
.card .system_icon{
width: 49%;
}
}
@media (min-width: 1025px) and (max-width: 1440px) {
.nav-container {
width: 20%;
height: 100%;
}
.dashboard {
height: 83%;
width: 100%;
}
.card{
min-width: 24%;
}
.card .system_icon{
width: 49%;
}
.card p{
font-size: 12px;
}
}
@media screen and (min-width: 1440px) {
.columns {
padding:15px 0px 0px 0px;
}
}
.service-box{
display: flex;
}
/* users */
.user-page {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
font-family: Open-Sans,sans-serif;
}
.user-page .col-11 label{
font-size: 13px;
font-weight: bold;
}
.user-page .table-paginate-container{
color: #7C7C7C;
}
.user-page .table-data .image{
height: 30px;
border-radius: 50%;
}
.list-page-title{
font-family: Open-Sans,sans-serif;
font-size: 14px;
font-weight: bold;
}
.group-page {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
}
.columns {
display: flex;
flex-wrap: wrap;
flex: 1 1 5rem;
padding:10px 0px 0px 0px;
align-items: center;
}
.group-filters-ctr{
align-items: center;
}
.service_columns {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.top-columns{
display: flex;
flex-wrap: wrap;
flex: 1 1 5rem;
padding:13px 0px 0px 0px;
}
.col-100 {
width: 100%;
}
.col-25{
width:13%;
}
.col-33 {
width: 16%;
}
.col-5{
width:2%;
}
.col-1{
width: 1%;
}
.col-10{
width: 10%;
}
.col-11 {
width: 11%;
}
.col-13{
width:13%
}
.col-14{
width: 13.5%;
font-size: 12px;
}
.col-15{
width: 15%;
text-align: right;
}
.col-60 {
width: 80%;
font-size: 13px;
}
.add_user_btn {
background-color: #289af5;
}
.batch_import_btn {
margin-left: 12px;
background-color: #003366;
}
.save-button{
width: 130px;
margin-right: unset;
}
.vertical_line{
border-left: 1px solid #7c7a7a38;
height: 40px;
width: 10px;
}
.cancel-button{
width: fit-content;
background-color: unset;
color: #000;
margin-right: unset;
}
.cancel-button:hover{
background-color: unset;
}
.btn_parent-center{
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.service-btn {
border: none;
color: white;
text-align: center;
width:13%;
padding: 14px 22px ;
text-decoration: none;
font-size: 13px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
}
.user-page .vertical-line{
margin: 0px 10px;
}
.columns .col-60 p{
font-size:13px;
color: #555555;
}
.line-gap{
line-height: 25px;
}
select {
padding: 4px 15px 4px 4px;
margin-left: 2px;
margin-right: 2px;
min-height: 25px;
border: 2px solid #bbbb;
cursor: pointer;
color: black;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml;utf8,")
no-repeat;
background-position: right 5px top 50%;
font-size: 13px;
height: 25px;
border-radius: 7px;
}
.search input[type="text"] {
color: black;
border: 2px solid #bbbb;
font-size: 13px;
height: 25px;
border-radius: 7px;
padding:3px 5px;
width:100%;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
padding-right: 30px;
}
.searchIcon_user svg {
color: #fff;
fill: currentColor;
width: 44px;
height: 44px;
padding: 10px;
color: #bbb;
}
.searchIcon {
all: unset;
cursor: pointer;
}
.blankImg{
width:45px;
border-radius: 50%;
}
.bold {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
}
.top-content {
height: auto;
}
.bottom-content {
height: auto;
}
.margin-left-40{
margin-left: 40%;
}
.margin-left-1{
margin-left: 2%;
}
.margin-left-5{
margin-left: 33%;
margin-top: -28%;
white-space: nowrap;
}
.margin-left-5-percent{
margin-left: -5%;
}
.margin-left-1-percent{
margin-left: 1%;
}
.react-paginate ul {
display: inline-block;
padding-left: 0px;
margin: 0px;
}
.react-paginate li {
display: inline-block;
border: 1px solid #b3b3b3;
color: #000;
cursor: pointer;
margin-right: 3px;
border-radius: 5px;
font-weight: 550;
}
.react-paginate li a {
padding: 2px 5px;
display: inline-block;
color: #000;
outline: none;
}
.react-paginate li.active {
background: rgb(224, 224, 224);
outline: none;
}
.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.react-paginate li.disabled a{
color:#636363;
outline: none;
}
.btn-span{
display: flex;
}
.application-options-container{
height: 20%;
}
.application-table-container{
height: 80%;
}
.reclear{
color: #9D9D9D;
font-size: 15px;
margin-left: 10px;
}
.user-reset-btn-ctr,.alarm-reset-btn-ctr,.view-grp-reset-btn-ctr {
padding-bottom: 4px;
}
.list-page-title-div{
margin-bottom: 10px;
margin-top: 10px;
}
.card-instruction{
font-size:13px ;
color: #707070;
font-weight: bold;
display: flex;
justify-content: center;
font-family: Open-Sans,sans-serif;
margin: 15px 0px;
align-items: center ;
}
.card-instruction svg{
height: 17px;
width:20px;
}
.card-instruction-bold
{
color: #000;
display: flex;
align-items: center;
}
@media (max-width: 1024px){
.card-instruction{
display: none;
}
}
@media screen and (max-width: 768px){
.col-11{
width: 35%;
margin-bottom: 10px;
}
.columns .col-33{
width: 60%;
}
}
@media screen and (max-width: 480px) {
.group-reset-btn{
width: 100%;
margin: 10px;
}
.group-reset-btn .pointer{
display: flex;
justify-content: center;
width: 100%;
}
.group-page .table-page-entry-container{
margin-top: 10px;
}
.columns{
justify-content: center;
align-items: center;
}
/* .user-page .search{
/* margin-bottom: 10px; */
/* } */
.user-page {
width:100%;
}
.reclear{
margin-right: auto;
}
.group-page {
width:100%;
}
.user-page .user-filter-column{
padding-top: 5px;
}
.user-filter-column{
flex-direction: column;
align-items: flex-start;
}
.col-33 {
padding-top: 2px;
width: 100%;
margin: 2px;
}
.group-page .col-33{
padding-top: 2px;
width: 100%;
margin: 2px;
}
.col-12 {
width: 100%;
margin: 2px;
}
.group-page .col-12{
width: 100%;
margin: 2px;
}
.group-page .top-columns .col-14{
width:100%;
text-align: left;
}
.columns .col-10{
width: 33%;
}
.col-5{
width:10%;
}
.col-11{
width:50%;
}
.col-14{
width: 39%;
}
.col-60 {
width: 100%;
}
.user-page .table-page-entry-container{
justify-content: center;
}
.user-page .col-11{
font-size: 11px;
font-weight: bold;
}
.top-columns .col-14{
width: 40%;
text-align: center;
}
.top-columns .col-12{
width: 50%;
text-align: center;
}
.batch_import_img{
display: none;
}
.col-15{
width:50%
}
.service_columns .col-20{
width:100%;
}
.service-btn{
width:50%;
}
.user-page select{
margin-bottom: 5px;
}
}
@media screen and(min-width:481px)and (max-width: 768px) {
.col-33 {
width: 100%;
margin: 2px;
}
.top-content {
height: 35%;
}
.user-page {
padding-left: 38px;
}
.group-page {
padding-left: 38px;
}
.columns {
text-align: center;
align-items: center;
justify-content: center;
}
.col-12 {
width: 100%;
margin: 2px;
}
.responsive {
width: 10%;
text-align: left;
}
.col-60 {
width: 100%;
margin: 2px;
}
.search input[type="text"]{
width:50%;
}
.margin-left-40{
margin-left: 0%;
margin-top: -22%;
}
}
.batch_import_img{
margin-right: 5px;
vertical-align: middle;
width:17px;
margin-left: 30%;
}
.remove-button-styles{
all: unset;
}
@media screen and (min-width: 768px) and (max-width: 900px) {
.col-33 {
width: 30%;
}
.top-content {
height: 35%;
}
.col-12 {
margin: 2px;
}
.col-60 {
width: 70%;
}
.top-content{
height: 50%;
}
.bottom-content{
height:50%
}
.columns .col-10{
width: 20%;
}
.col-11{
width:18%;
}
.col-14{
width: 22%;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.col-33 {
width: 30%;
margin: 2px;
}
.col-12 {
margin: 2px;
}
.columns .col-10{
width: 20%;
}
.col-11{
width:18%;
}
.col-14{
width: 22%;
}
.col-60 {
width: 50%;
}
.top-content {
height: auto;
}
.bottom-content{
height:50%
}
.margin-left-5-percent{
margin-left: 3%;
}
.col-15{
width:20%;
padding-top:5px
}
}
@media (min-width: 1025px) and (max-width: 1440px) {
.col-33 {
width: 18%;
margin: 2px;
}
.top-content {
height: auto;
}
.batch_import_img{
margin-left: inherit;
}
}
@media (width:768px) {
.user-page-search-container{
margin: 10px 0px 0px 0px !important;
}
}
.dashboard-card{
background-color: #fff;
border-radius: 10px;
padding: 15px;
margin: 10px 20px 30px 10px;
box-shadow: -8px 12px 18px 0 #dadee8;
font-family: Poppins-regular, sans-serif;
font-weight: 600;
font-size: 18px !important;
width: 22%;
}
.card-title-ctr{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.card-title-ctr svg{
font-size: 40px;
font-weight: 600;
}
.large-button, .signIn-button{
width: 100%;
margin-right: unset;
}
.card p{
height: 47px;
}
.system_icon{
height: 93px;
}
.facility-icon{
color: #fd7e14 !important;
}
.accounts-icon{
color: #6777ef !important;
}
.users-icon{
color: #e83e8c !important;
}
.device-icon{
color: #417c50 !important;
}
.status-count{
font-size: 25px;
}
.no-menu-dashboard{
width: 100%;
height: 75%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 1440px) {
.dashboard-card {
width: 14%;
}
}
@media (max-width: 1025px) {
.dashboard-card {
width: 30%;
}
}
@media (max-width: 960px) {
.dashboard-card {
width: 45%;
}
}
@media (max-width: 640px) {
.row {
justify-content: center;
}
.dashboard-card {
width: 85%;
}
}
@media (max-width: 480px) {
.dashboard-card {
width: 85%;
}
}
.table-container{
width: 100%;
overflow: hidden;
}
.table-container.full-height {
width: 100%;
height: 100%;
overflow: hidden;
}
.table-options-container{
width: 100%;
height: 10%;
display: flex;
padding: 10px;
font-size: 14px;
justify-content: space-between;
}
.table-page-entry-container{
display: flex;
}
.table-entry-container{
display: flex;
margin-right: 10px;
align-items: center;
justify-content: center;
color: #7C7C7C;
}
.table-paginate-container{
display: flex;
user-select: none;
align-items: center;
justify-content: center;
color: #7C7C7C;
}
.table-paginate-inner-container{
padding: 4px;
margin-left: 3px;
margin-right: 3px;
border-radius: 3px;
border: 1px solid #bbbb;
display: flex;
align-items: center;
justify-content: center;
color: #7C7C7C;
height: 26px;
}
.table-paginate-next-prev{
width: 12px;
cursor: pointer;
}
.table-paginate-page{
padding: 0px 8px;
font-size: 12px;
width: 41px;
text-align: center;
}
.table-paginate-next{
rotate: -90deg;
}
.table-paginate-prev{
rotate: 90deg;
}
.table-title-container{
display: flex;
align-items: center;
justify-content: center;
font-weight: bold ;
}
.table-inner-container{
width: 100%;
height: 90%;
overflow: auto;
}
.table-header{
display: flex;
}
.flow{
overflow: visible;
}
.table-header-data{
flex-grow : 1;
padding: 10px;
display: flex;
font-size: 15px;
user-select: none;
box-sizing: border-box;
border-bottom: 1px solid #CCCCCC;
align-items: center;
color: #666666;
}
.sort-icon{
margin-left: 6px;
height: 14px;
}
.pointer{
cursor: pointer;
}
.table-header-data .active{
filter: invert(20%) sepia(86%) saturate(2470%) hue-rotate(208deg) brightness(97%) contrast(104%);
}
.table-body{
display: flex;
flex-direction: column;
}
.table-data-row{
display: flex;
}
.table-data{
flex-grow: 1 ;
height: 64px;
display: flex;
padding: 15px 10px;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #CCCCCC;
font-size: 14px;
font-family: Open-Sans,sans-serif;
font-size: 13px;
color: #555555;
}
.table-data.multiple-data {
display: block;
}
.table-multiple-data{
margin-right: 3px;
}
.table-btn-field{
width: 70%;
border: none;
padding: 10px 20px;
font-weight: bold;
color: white;
font-family: Open-Sans ,sans-serif;
border-radius: 5px;
display: flex;
align-items: center;
text-align: left;
height: 45px;
}
.btn-txt {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
width: 100%;
}
.table-btn-field svg{
margin-right: 10px;
font-size: 15px;
}
.table-data a{
color: #438AFE;
text-decoration: none;
}
.table-data > span{
overflow: hidden;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-line;
}
.no-data{
width: 100%;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.table-select{
width: 75px;
margin: 0px 10px;
color: #7C7C7C;
border: 1px solid #bbbb ;
border-radius: 3px;
background: url(/assets/Drop_down_arrow.png)
no-repeat;
background-position: right 7px top 50%;
background-size: 12px;
height: 26px;
}
.icon-style{
height: 25px;
width: 25px;
margin-right: 5%;
}
.alignItem{
display: flex;
align-items: center;
justify-content: center;
}
.imageHover:hover{
cursor: pointer;
}
.tone-lib-height{
height: 323px;
overflow: auto;
}
.tool-tip {
position: relative;
display: flex;
justify-content: flex-end;
}
.tool-tip .tool-tip-text {
display: none;
background-color: #35412C;
color: #fff;
border-radius: 6px;
padding: 5px 5px;
position: absolute;
z-index: 9002;
top: 105%;
margin-top: 4px;
}
.tool-tip .tool-tip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 99%;
margin-left: -13px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #35412C transparent;
}
.tool-tip-text {
word-break: break-word;
}
.tool-tip .tool-tip-text.top::after {
content: "";
position: absolute;
top: 100%;
left: 99%;
border-width: 5px;
border-style: solid;
border-color: #35412C transparent transparent transparent;
}
.tool-tip .tool-tip-text.top {
margin-bottom: 4px;
}
.tool-tip:hover .tool-tip-text {
display: block;
}
.bottom {
justify-content: flex-end !important;
margin: 10px 0;
}
@media only screen and (max-width: 600px) {
.hide-mobile{
display: none;
}
.table-options-container{
height: 13%;
flex-direction: column;
}
.table-inner-container{
height: 87%;
}
.table-title-container{
margin-bottom: 10px;
justify-content: flex-start;
font-size: 14px;
font-weight: bold;
}
.table-page-entry-container{
justify-content: flex-end;
}
.icon-style{
margin-right:8%;
}
}
@media only screen and (max-width: 480px){
.table-page-entry-container {
justify-content: center;
}
.icon-style{
margin-right:8%;
}
}
.manage-mustering-container .modal-content{
max-height: 90%;
font-family: Open-Sans,sans-serif;
background: white;
border-radius: 10px;
height: auto;
}
.manage-mustering-modal{
width: 45%;
height: auto;
max-height: 97%;
padding: 0px;
overflow-y: auto;
background-color: white;
display: flex;
flex-direction: column;
}
.manage-mustering-container .modal-content h3{
margin-bottom: 20px;
font-size:14px;
letter-spacing: 2px;
}
.manage-mustering-section .current-location-container, .manage-mustering-section .new-location-container, .manage-mustering-section .notes-container{
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.manage-mustering-section .new-location-container input[type="text"]{
margin: 0px;
border: 2px solid #bbbb;
border-radius: 6px;
padding: 12px;
font-size: 15px;
font-family: SF Pro Display,sans-serif;
height: 30px;
}
.manage-mustering-section .new-location-container input[type="text"]:disabled{
opacity: 0.5;
cursor: not-allowed;
}
.manage-mustering-section .notes-container .manage-mustering-text-area{
width: 60%;
}
.manage-mustering-section input[type="checkbox"]:disabled{
border: #525252;
color: rgb(158, 158, 158);
cursor: not-allowed;
}
.manage-mustering-section .notes-container textarea{
width: 100%;
height: 50px;
border: 1px solid #606060;
padding: 8px;
border-radius: 6px;
font-size: 15px;
font-family: SF Pro Display,sans-serif;
}
.manage-mustering-section .notes-container{
align-items: flex-start;
margin-top:15px;
}
.manage-mustering-section .notes-container small{
font-size: 10px;
font-weight: normal;
display: block;
}
.manage-mustering-section .location-exit-error{
display: flex;
justify-content:flex-end;
}
.manage-mustering-section .current-location-container span,.manage-mustering-section .new-location-container span{
width: 60%;
}
.manage-mustering-section .location-exit-error .location-exit-error-ctr{
position: absolute;
width: 51%;
font-size: 13px;
background: transparent linear-gradient(180deg, #1661A3 0%, #032848 100%) 0% 0% no-repeat padding-box;
color: white;
padding: 15px ;
border-radius: 10px;
}
.location-error-header-ctr{
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.location-error-header-ctr svg{
font-weight: 900;
cursor: pointer;
}
.manage-mustering-section .current-location-container label, .manage-mustering-section .new-location-container label, .manage-mustering-section .notes-container label{
width: 100%;
}
.manage-mustering-container .manage-mustering-section .spaced-container{
padding: 15px 20px 0px 30px;
position: relative;
}
.mustering-label-container{
display: flex;
align-items: center;
}
.manage-mustering-container .modal-content div input{
width: 100%;
}
.manage-mustering-container .modal-content div select{
height: 30px;
width: 100%;
border-radius: 6px;
font-size: 15px;
color: #606060;
font-family: SF Pro Display,sans-serif;
}
.manage-mustering-container .modal-content div select:disabled{
cursor: not-allowed;
opacity: 0.5;
}
.manage-mustering-container .modal-content input[type="radio"]{
appearance: none;
border: 2px solid #1198ED;
background-color: white;
width: 18px;
height: 18px;
margin-right: 15px;
}
.manage-mustering-container .modal-content input[type="radio"]:checked{
border: 5px solid #1198ED;
}
.manage-mustering-container .modal-content .checkin-container{
background-color: #C2F3FC;
font-size: 14px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.manage-mustering-container .modal-content .checkin-container label{
margin-bottom: 5px;
color: #666666;
font-weight: bold;
}
.manage-mustering-container .modal-content .checkin-container input[type="checkbox"]{
width: 18px;
height: 20px;
}
.mustering-label-container{
width: 50%;
}
.manage-mustering-container .modal-content .checkin-container .checkin-sub-container{
display: flex;
flex-direction: row;
align-items: center;
width: 80%;
justify-content: space-around;
margin-bottom: 0px;
}
.manage-mustering-container .modal-content .checkin-container .checkin-sub-container div{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0px;
text-align: center;
}
.manage-mustering-container .manage-mustering-section .btn-conteiner{
display: flex;
justify-content: center;
margin-bottom: 10px;
padding: 0px;
}
.manage-mustering-container input[type="checkbox"]{
border: 2px solid #333333;
width: 18px;
height: 20px;
border-radius: 3px;
}
.manage-mustering-error-msg{
text-align: center;
margin: 10px;
font-size: 13px;
height: 13px;
}
.manage-mustering-section{
height: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 1150px){
.manage-mustering-container .modal-content{
overflow-y:hidden;
left:55%;
}
}
@media (max-width: 1025px){
.manage-mustering-container .modal-content{
overflow-y:hidden;
width: 100%;
top:45%;
left:55%;
}
.manage-mustering-section .btn-conteiner button:nth-child(2){
width:50%
}
}
@media (max-width: 850px){
.manage-mustering-modal{
width: 70%;
}
.manage-mustering-container .modal-content{
width: 100%;
left: 58%;
}
}
@media (max-width:769px){
.manage-mustering-modal{
width: 90%;
}
.manage-mustering-container .modal-content{
left:50%;
}
}
@media (max-width: 680px){
.manage-mustering-section .current-location-container, .manage-mustering-section .new-location-container, .manage-mustering-section .notes-container{
flex-direction: column;
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.mustering-label-container{
width: 100%;
}
.manage-mustering-section .current-location-container span,.manage-mustering-section .new-location-container span, .manage-mustering-section .notes-container div{
width: 95%;
}
.manage-mustering-container .modal-content{
width: 100%;
max-height: 100%;
overflow-y: auto;
}
.manage-mustering-section .location-exit-error .location-exit-error-ctr{
width: 90%;
}
.manage-mustering-container .mustering-label-container{
display: flex;
width: 100%;
margin-bottom: 5px;
}
.manage-mustering-section .btn-conteiner button:nth-child(2){
width:60%;
}
.manage-mustering-section .current-location-container label, .manage-mustering-section .new-location-container label, .manage-mustering-section .notes-container label{
width: 100%;
margin-bottom: 5px;
}
.manage-mustering-container .modal-content .checkin-container{
flex-direction: column;
padding: 20px;
}
.manage-mustering-section .current-location-container, .manage-mustering-section .new-location-container, .manage-mustering-section .notes-container{
align-items: unset;
}
}
@media (max-width: 680px){
.manage-mustering-modal{
width: 80%;
}
.manage-mustering-section{
max-height: 100%;
overflow: auto;
}
.manage-mustering-section .btn-conteiner button:nth-child(2){
width: 60%;
}
.manage-mustering-section .notes-container .manage-mustering-text-area{
width: 95%;
}
}
.application-options-container{
margin-left: 5px;
height: auto;
}
.application-table-container{
height: 80%;
margin-top: 20px;
}
@media(max-width:600px) {
.application-options-container{
padding:5px;
}
.application-table-container{
margin-top:0px;
}
}
.mustering-container{
font-family: Open-Sans,sans-serif;
font-size: 14px;
overflow: auto;
}
.mustering-container input[type="checkbox"]{
width: 18px;
height: 18px;
}
.mustering-container .status-bar{
display: flex;
}
.mustering-container .status-bar div{
margin-right: 7px;
}
.mustering-container input{
height: 25px;
}
.mustering-container .table-data{
font-size: 11px;
}
.display-flex{
display: flex;
}
.space-between{
justify-content:space-between;
margin-bottom:10px;
align-items: baseline;
}
.space-between div{
margin:3px 0px;
}
.mustering-search-ctr{
display: flex;
align-items: baseline;
}
.mustering-title{
font-weight: bold;
}
.col-9{
width:9%;
}
.col-30{
width:30%
}
.col-40{
margin-top:-5px
}
.search-label{
font-size: 14px;
margin-top: 9px;
font-weight: bold;
}
.margin-left-10{
margin-left:10%;
margin-top:7%
}
.margin-left-2{
margin-left:0%;
}
.searching input[type="text"] {
color: black;
border: 2px solid #bbbb;
font-size: 12px;
border-radius: 5px;
padding:3px 5px;
margin-top: 5%;
width:100%;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
padding-right: 30px;
}
.mustering-container .table-title-container{
font-size: 11px;
font-weight: bold;
}
.mustering-container .table-entry-container{
font-size: 11px;
color: #7C7C7C;
}
.vertical-line{
margin:0% 12% 12% 12% ;
border-left: 2px solid #7C7A7A38;
height: 22px;
}
.report-line{
border-left: 2px solid #7C7A7A38;
height: 22px;
}
.event-result{
display: flex;
justify-content:space-between;
font-size: 13px;
}
.col-22{
width:20.5%;
}
.col-80{
width:80%;
font-weight: bold;
}
.muster-responsive{
display: none;
}
.margin-5{
margin-top:2%;
}
.display-flex select{
height: 20%;
width:20%;
font-size: 11px;
font-family: SF Pro Display, sans-serif;
border-radius: 5px;
}
.active-mustering-alarm-triggered-by{
font-family: Open-Sans,sans-serif;
font-size:14px;
}
.active-mustering-alarm-triggered-by-name{
font-weight: bold;
}
.active-mustering-details-ctr{
flex-wrap: wrap;
width: 97%;
}
.space-between .active-mustering-title{
margin-bottom: 10px;
}
.filter-reset-container{
color: #9D9D9D;
align-items: center;
}
.margin-top-2{
margin-top: 5px;
}
.margin-top-3{
margin-top: 3%;
}
.current-result-1 div{
font-weight: bold;
}
.application-table-container .table-header-data{
font-size: 12px;
font-weight: bold;
color: #666666;
}
.mustering-container .table-entry-container{
margin-right: 10px;
}
.mustering-container .table-entry-container select{
margin: 0px 10px;
font-size: 11px;
width: 50px;
}
.mustering-container .table-paginate-container{
font-size: 11px;
}
.mustering-container .current-result-2{
border-right: 2px solid rgb(192, 192, 192);
padding-right: 8px;
}
.clear-btns{
background: white;
border:none;
font-size: 12px;
color: #9D9D9D;
padding: 2px 14px;
height: 20px;
cursor: pointer;
font-size: 13px;
border-right:2px solid #CCC;
}
.mustering-container .refresh-btn{
border: none;
}
.current-result{
display: flex;
align-items: center;
height: 20px;
}
.mustering-container .table-data img{
border-radius: 50%;
height: 30px;
}
.refresh-btn{
background: white;
border:none;
font-size: 12px;
color: #9D9D9D;
padding: 2px 14px;
height: 20px;
cursor: pointer;
font-size: 13px;
}
.current-result-title{
display:none;
}
.count-bold{
font-weight: bold;
}
.back-to-mustering-btn{
cursor: pointer;
border: none;
background: none;
letter-spacing: 0.5px;
display: flex;
align-items: center;
font: inherit;
font-weight: bold;
}
.back-to-mustering{
width: 100%;
display: flex;
justify-content: flex-end;
margin-right: 5px;
}
.back-to-mustering svg{
margin-right: 5px;
}
@media (min-width:1440px){
.application-table-container .table-header-data{
font-size: 14px;
}
.mustering-container .table-title-container,.mustering-container .table-entry-container{
font-size: 14px;
}
.mustering-container{
font-size: 14px;
}
.mustering-title{
font-size: 14px;
}
.search-label{
font-size: 14px;
}
.display-flex select{
font-size: 14px;
}
.mustering-container .table-data{
font-size: 14px;
}
.application-table-container .table-header-data{
font-size: 15px;
}
.mustering-container .status-bar{
padding-right: 5px;
}
.col-40{
width:30%
}
}
@media(max-width:600px) {
.display-flex{
flex-direction: column;
}
.mustering-title{
text-align: left;
}
.margin-left-10{
margin-left: 0%;
}
.col-40{
width:100%;
margin-top:0px
}
.muster-responsive{
display: block;
padding:5px;
}
.not-responsive{
display: none;
}
.display-flex select{
width:100%
}
.mustering-container .table-options-container {
padding:5px;
}
.col-80{
width:100%
}
.mustering-container .status-bar{
flex-wrap: wrap;
}
.mustering-container .status-bar div{
font-size: 10px;
white-space: nowrap;
}
.filter-reset-container{
margin-top: 10px;
width: 100%;
justify-content: center;
}
}
@media(max-width: 768px){
.searching input[type="text"]{
width:90%;
}
.col-22{
width: 19%;
}
}
@media only screen and (min-width:769px) and (max-width:990px){
.searching input[type="text"] {
width:87%;
}
.col-80{
width:100%
}
.col-40{
width:100%
}
}
@media (min-width:1440px){
.margin-top-3{
margin-top: 10%;
}
.margin-left-2{
margin-left: 1.4%;
}
.col-22{
width:19%;
}
}
@media (max-width: 1025px){
.space-between{
flex-direction: column;
}
.mustering-search-section{
width: auto;
}
.col-40{
width:40%
}
}
@media (max-width: 480px){
.mustering-container .status-bar{
width: 100%;
}
.mustering-container .status-bar .current-result-1{
display: none;
}
.mustering-container .status-bar div{
margin-right:7px;
}
.current-result-title{
display:block;
font-weight: bold;
}
.col-40{
width:100%
}
}
.mustering-details-container{
display: flex;
width: 100%;
flex-wrap: wrap;
}
.mustering-details-card{
width: 300px;
border-radius: 13px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
display: flex;
flex-direction: column;
padding: 20px;
margin: 20px;
}
.mustering-card-title{
text-align: center;
margin-bottom: 10px;
text-align: center;
max-height: 28px;
margin-bottom: 10px;
overflow: hidden;
}
.mustering-card-icon-details-container{
display: flex;
justify-content: center;
}
.mustering-card-icon-container{
position: relative;
width: 135px;
}
.mustering-triangle-icon{
width: 100%;
height: 100%;
fill: rgb(245, 176, 86);
}
.mustering-alert-icon{
left: 45px;
position: absolute;
top: 64px;
width: 55px;
}
.alert-icon {
width: 45px;
height: 45px;
}
.mustering-card-description{
margin-bottom: 10px;
width: 100%;
overflow:hidden;
word-break: break-all;
height: 75px;
max-height: 75px;
}
.mustering-triggered-time{
font-weight: bold;
margin-bottom: 20px;
}
.view-mustering-button-ctr{
background-color: #35412c;
color: white;
text-align: center;
padding: 10px;
border-radius: 8px;
cursor: pointer;
}
.batch-import-section{
height: auto;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
font-family: Open-Sans,sans-serif;
padding: 15px 25px 15px 25px;
font-size: 15px;
}
.batch-import-title{
width: 100%;
font-weight: bold;
margin-bottom: 15px;
font-size: 18px;
}
.batch-import-section input[type="file"]{
font-family: Open-Sans,sans-serif;
}
.batch-import-content-container{
display: flex;
flex-direction: column;
justify-content: left;
width: 100%;
}
.file-template-container{
display: flex;
font-weight: bold;
margin: 15px 0px;
}
.xlsx-template{
margin-right: 15px;
cursor: pointer;
color: #1D6EB4;
text-decoration: none
}
.csv-template{
cursor: pointer;
color: #1D6EB4;
text-decoration: none
}
.batch-import-section input[type="file"]::file-selector-button{
padding:10px 25px;
background-color:#ffffff;
color: rgb(0, 0, 0);
border-radius: 5px;
margin:15px;
cursor: pointer;
font-weight: bold;
border: 1px solid black;
box-shadow: 0px 3px 6px #00000029;
}
.batch-import-file-input{
width: 100%;
display: flex;
margin:10px 0px
}
.batch-import-section .batch-import-error-ctr{
height: 20px;
font-weight: bold;
margin: 10px 0px 10px 0px;
font-size: 15px;
text-align: center;
margin: 10px 0px;
}
.email-password-sent-link-str{
display: flex;
align-items: center;
margin-top: 10px;
}
.email-password-sent-link-str .sent-link-checkbox{
width: 18px;
height: 18px;
margin-right: 10px;
}
.event-details{
z-index: 901;
}
.popUpInput{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 2%;
}
.fileLabel{
margin-left: 0% !important;
width: 100% !important;
}
.popup-input-ctr{
display: flex;
flex-direction: row;
align-items: baseline;
}
.forlabel{
margin-top: 2% !important;
}
.add-group-modal{
}
.hide-role-filter{
opacity: 0.3;
}
.hide-role-filter:hover{
cursor: not-allowed;
}
.hide-role-filter select:hover{
cursor: not-allowed;
}
.modal-title{
color: #000;
font: normal normal 700 14px SF Pro Display, sans-serif;
text-align: left;
}
.group-name-container{
width: 100%;
}
.modal-inner-container{
height: 90%;
flex: 1;
}
.response-container{
height: 18px;
color: #890804;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Open-Sans,sans-serif;
}
.group-name-input{
border:none;
outline: 0;
padding: 3px;
border-bottom: 2px solid #00000034;
width:50%;
font-size: 15px;
}
.group-filter-inner-container{
width: 100%;
padding-top:5px;
}
.group-filter-inner-container select{
width: 30%;
border-radius: 5px;
}
.group-filter-select{
width: 30%;
}
.groups-select-container{
width: 80%;
}
.group-filter-search{
width: 30%;
border-radius: 5px;
border: 1px solid #bbbb;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
min-height: 25px;
padding: 4px 25px 4px 4px;
margin-left: 25px;
}
.group-filter-container{
width: 100%;
}
.group-filter-container-title{
color: #000;
font: normal normal 700 14px SF Pro Display, sans-serif;
padding-bottom: 5px;
text-align: left;
margin-top:2%;
}
.user-list-select-container{
width: 100%;
display: flex;
justify-content: space-between;
margin: 10px 0px;
}
.user-list-select-container-list{
width: 100%;
display: flex;
justify-content: space-between;
padding-bottom: 5px;
margin-top:2%
}
.user-list-unselected-container{
width: 45%;
display: flex;
}
.user-list-selected-container{
width: 45%;
display:flex;
}
.user-list-select-checkbox-container{
display: flex;
margin-left: 20px;
align-items: center;
}
.user-list-select-checkbox-container input{
margin-left: 10px;
width: 18px;
height: 18px;
}
.user-list-unselected-container-list{
width: 50%;
padding: 5px;
height: 100%;
}
.user-list-option-container-list{
width: 10%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.user-list-option-container-list img{
margin-bottom: 15px;
cursor: pointer;
height: 25px;
}
.user-list-selected-container-list{
width: 50%;
padding: 5px;
height: 100%;
}
.user-list-select-container-title{
font: normal normal 700 13px SF Pro Display, sans-serif;
font-weight: 600;
}
.ccard{
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 4px 9px 5px rgb(0 0 0 / 20%);
border-radius: 13px;
padding: 10px;
height: 100%;
min-height: 200px;
overflow: auto;
}
.user-list-row{
width: 100%;
margin-bottom: 7px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block !important;
}
.user-list-checkbox {
height: 25px;
width: 25px;
width: 10%;
}
.user-list-checkbox .container {
position: relative;
}
.user-list-checkbox .container input[type=checkbox]{
cursor: pointer;
opacity: 0;
position: absolute;
}
.container input[type=checkbox]:checked~.checkmark {
border: 5px solid #1198ed;
}
.user-list-checkbox .container .checkmark{
background-color: #fff;
border: 2px solid #1198ed;
border-radius: 50%;
height: 20px;
position: absolute;
width: 20px;
cursor: pointer;
}
.user-list-name{
width: auto;
cursor: pointer;
}
.user-list-email{
width: 50%;
}
.popup-button-container{
margin-top: 10px;
margin-bottom: 3px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.responsive {
display: none;
}
.group-page .col-12{
margin-right: 10px;
}
.groups-select-filter-container{
width: 20%;
}
.group-page .col-12 select{
width: 100%;
}
.user-list-select-container-list .icon{
padding:10px;
display: flex;
flex-direction: column;
padding-top: 20px;
justify-content: center;
}
@media only screen and (max-width:768px) {
.user-list-name{
width: auto;
margin-left: 3%;
}
}
@media only screen and (max-width:600px) {
.modal-content-container{
width: 90%;
}
.group-name-input{
width: 98%;
}
.group-filter-select{
width: 100%;
}
.group-filter-search{
width: 100%;
margin-left:1%;
margin-top: 3%;
}
.user-list-select-container{
flex-direction: column;
padding-top:2%;
}
.user-list-select-container-list{
flex-direction: column;
}
.user-list-unselected-container-list {
width:100%;
height: 300px;
}
.add-group-modal .user-list-option-container-list{
flex-direction: row;
padding-left: 50%;
padding-top: 2%;
}
.user-list-selected-container-list{
width: 100%;
min-height: 50%;
}
.popup-button-container{
margin-top:5%;
width: auto;
}
.responsive {
display: block;
}
.user-list-selected-container {
display: none;
}
.user-list-select-container-title{
white-space: nowrap;
}
.user-list-select-checkbox-container{
white-space: nowrap;
}
.groups-select-container{
width: 100%;
}
.columns .col-12 {
width: 100%;
}
.top-columns .col-14{
padding: 1px;
text-align: left;
}
.add-group-modal .columns .col-33{
width: 100%;
}
}
.add-group-modal, .manage-role-modal{
max-height: 95%;
display: flex;
flex-direction: column;
}
.manage-role-modal{
height: auto;
}
.Add-user-content-container .item-listing-box{
flex-direction: column;
}
.add-group-modal-content{
max-height: 99%;
overflow: auto;
}
@media only screen and (max-width:768px) {
.user-list-name{
width:90%;
padding-left:5%;
}
.modal-inner-container{
margin-left: 0px;
}
}
@media(max-width:1024px){
.user-list-select-container-list{
height:70%
}
}
@media only screen and (min-width: 1440px) {
.add-group-modal, .manage-role-modal{
width: 65%;
}
.user-list-select-container-list{
height: 65%;
}
.modal-title{
height: 5%;
}
}
@media screen and (max-width: 768px){
.group-page .col-33{
width: 40%;
}
.group-page .col-12{
width: 40%;
}
}
@media only screen and (max-width: 600px){
.group-page .col-12{
width: 40%;
}
.modal-inner-container{
height:auto;
}
.group-filter-inner-container{
width: 98%;
}
.group-filter-inner-container select{
width: 100%;
}
.user-list-select-container-list .icon {
padding: 0%;
flex-direction: row;
justify-content: center;
background-color: rgba(255,255,255,.5);
}
.user-list-select-container-list .icon svg{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
margin-bottom: 10px;
cursor: pointer;
}
.user-list-unselected-container-list {
width:100%;
height: 250px;
}
}
@media only screen and (max-width:480px){
.group-page .col-33{
width: 45%;
}
.group-page .col-12{
width: 45%;
}
.user-list-unselected-container-list {
width:100%;
}
.user-list-unselected-container-list .item-listing-box{
width:100%
}
.user-list-selected-container-list .item-listing-box{
width:100%
}
}
.specific-group-management-container{
height: 100%;
font-family: Open-Sans,sans-serif;
font-size: 13px;
}
.specific-group-management-title{
font-weight: bold;
}
.specific-group-management-btn-field{
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 10px;
}
.specific-group-management-btn-field button{
width: 160px ;
border-radius: 4px;
font-family: SF Pro Display, sans-serif;
font-size: 14px;
background-color:#2c4458 ;
}
.specific-group-management-btn-field button:last-child{
background-color: transparent;
color: black;
border: none;
display: flex;
align-items: center;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.specific-group-management-btn-field button:last-child:only-child {
width: 96%;
height: 30px;
justify-content: flex-end;
}
.specific-group-management-btn-field button:last-child svg{
font-size: 20px;
margin-right: 5px;
}
.specific-grouup-management-filter-container{
display: flex;
align-items: flex-end;
margin-bottom: 10px;
}
.specific-grouup-management-selection-filter{
display: flex;
flex-direction: column;
width: 20%;
}
.specific-grouup-management-selection-filter .specific-group-management-title{
margin-bottom: 7px;
}
.back-to-group-btn button{
background-color:#2c4458 ;
color:white;
border: none;
padding: 7px 30px;
font-family: inherit;
border-radius: 4px;
}
.specific-group-management-table-container .table-select{
padding-top: 0px;
padding-bottom: 0px;
min-height: 20px
}
.specific-group-management-table-container .table-paginate-inner-container{
padding: 0px;
}
.specific-group-management-service-allotement-container{
display: flex;
margin-top:15px;
flex-direction: column;
}
.specific-group-management-service-allotement-container .service-allotement-title{
margin-right: 10px;
font-weight: bold;
}
.service-allotement-checkbox-container input[type="checkbox"]{
width: 18px;
height: 18px;
}
.specific-group-service-ctr{
display: flex;
margin: 7px 0px;
}
.add-additional-ctr{
color:#438AFE;
}
.service-allotement-checkbox-container{
display: flex;
align-items: center;
margin: 7px 0px;
}
.service-allotement-checkbox-container span{
margin-right: 10px;
}
@media only screen and (max-width:480px) {
.specific-grouup-management-selection-filter{
width: 40%;
}
}
.server-configuration{
overflow: auto;
}
.server-configuration h3{
font-size: 14px;
font-family: Open-Sans,sans-serif;
margin: 20px 0px;
}
.server-configuration-container{
padding: 20px;
margin: auto;
box-shadow: 0px 10px 20px #00000034;
font-family: Poppins-regular,sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
}
.server-configuration-container h5{
color: #448CCB;
font-weight: bold;
}
.server-configuration-container input, .deployment-input-ctr input, .manage-device-details-ctr input[type="text"]{
box-shadow: 0px 5px 8px #00000029;
border: 1px solid #333333;
border-radius: 4px;
padding: 3px;
width: 65%;
display: block;
margin: 0px;
margin-bottom: 15px;
margin-top: 10px;
}
.server-configuration-container input.invalid, .deployment-input-ctr input.invalid{
border: 1px solid #890804 !important;
}
.input-error-message{
height: 10px;
font-size: 11px;
text-align: right;
color: #890804;
}
.server-configuration-container input::placeholder, .deployment-input-ctrinput::placeholder{
color:#CCCCCC;
font-size: 14px;
}
.server-configuration-container input[type="radio"]{
width: auto;
display: inline;
box-shadow: none;
}
.server-configuration-container label{
font-size: 12px;
font-weight: bold;
}
.server-button-container {
width: 450px;
display: flex;
justify-content: center;
}
.server-button-container button:nth-child(2){
width: 40%;
background-color: #304455;
border-radius: 5px;
margin-left: 2%;
}
.server-configuration-container .server-type{
display: flex;
margin-top: 10px;
}
.server-configuration-container .radio-button-group{
display: flex;
align-items: center;
margin-right: 10px;
}
.server-configuration-container fieldset{
border: none;
}
.server-configuration-container .radio-button-group input{
margin: 0px;
margin-right: 5px;
}
.server-type h5{
border-bottom: 10px;
}
.server-type input[type="radio"]{
appearance: none;
border: 2px solid #1198ED;
background-color: white;
width: 12px;
height: 12px;
margin-right: 15px;
border-radius: 50%;
}
.server-type input[type="radio"]:checked{
border: 4px solid #1198ED;
}
.sara-credentials,
.ums-credentials,
.mqtt-credentials{
width:30%;
}
.server-configuration-inner-container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.server-config-button-container{
width: 75%;
display: flex;
padding: 10px;
align-items: center;
margin: auto;
}
.update-error-message{
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #890804;
margin-right:5%
}
.server-config-row-2{
margin-top: 25px;
width: 100%;
}
.media-credentials{
width: 30%;
}
.region-select{
display: flex;
flex-direction: column;
}
.region-select select{
margin-top: 8px;
width: 100%;
box-shadow: 0px 5px 8px #00000029;
border: 1px solid #333333;
border-radius: 4px;
padding: 3px;
font-size: 0.95rem;
}
.invalid-select{
border: 1px solid #890804 !important;
}
@media (min-width:769px) {
.server-configuration-container{
font-size: 12px;
}
.server-configuration h3{
margin: 10px;
}
.server-configuration-container input{
margin-top: 7px;
margin-bottom: 7px;
width: 100%;
}
.server-configuration-container label {
font-size: 11px;
}
.server-button-container{
width:60%
}
.server-button-container button{
margin: 0px;
}
}
@media (max-width:768px){
.sara-credentials,
.ums-credentials,
.mqtt-credentials,
.media-credentials {
width: 45%;
}
.server-configuration-container input{
width:100%
}
}
@media (max-width: 450px){
.sara-credentials,
.ums-credentials,
.mqtt-credentials,
.media-credentials{
width:100%;
}
.server-configuration-container input{
width:100%
}
.server-configuration-container{
width: 100%;
box-shadow: none;
}
.server-button-container{
justify-content: center;
width: 100%;
}
}
.application-management-container{
overflow: auto;
}
.application-management-container h4{
margin: 25px 0pc;
}
.service-allocation-options-container{
display: flex;
width: 100%;
}
.service-allocation-option-container{
display: flex;
width: 15%;
}
.application-management-section{
box-shadow: 0px 10px 20px #00000034;
padding:20px 20px 20px 30px;
border-radius: 3px;
display: flex;
flex-direction: column;
font-family: SF Pro Display,sans-serif;
letter-spacing: 0.5px;
font-size: 13px;
width: 1110px;
color: #1E2432;
}
.application-management-section .row-1{
display: flex;
justify-content: right;
}
.application-management-section label{
margin-right: 10px;
}
.application-management-section .row-1 input{
width: 25%;
}
.application-management-section .row-2{
display: flex;
margin-bottom: 40px;
}
.application-management-section .row-2 div{
margin-right: 20px;
display: flex;
align-items: center;
}
select::selection {
color: #606060;
}
.application-management-section .row-2 div label{
margin-right: 10px;
}
.selection-filter{
width: 50%;
display: flex;
align-items: center;
}
.selection-filter-label{
width: 20%;
font-weight: bold;
font-size: 14px;
text-align: center;
}
.selection-filter-input{
width: 50%;
}
.application-management-section .row-3{
display: flex;
flex-direction: column;
}
.application-management-section .row-3 .row-3-1 {
display: flex;
align-items: center;
}
.application-management-section .row-3 .row-3-1 h4{
margin-right: 20px;
}
.application-management-section .row-3 .row-3-1 div{
display: flex;
align-items: center;
}
.application-management-section .row-3 .row-3-1 h4{
margin-right: 25px;
}
.application-management-section .row-3 .row-3-2{
display: flex;
flex-wrap: wrap;
}
.application-management-section .row-3 .row-3-2 div{
display: flex;
justify-content: left;
width: 18%;
margin: 10px;
align-items: center;
}
.application-management-section .row-3 .row-3-2 input{
margin-right: 10px;
}
.application-management-btn-field{
width: 1110px;
/* display: flex;
align-items: center;
justify-content: center; */
margin-top: 8px;
}
.application-management-container input[type="checkbox"]{
width: 18px;
height: 18px;
border-radius: 3px;
}
.application-management-btn-field{
/* display: flex;
justify-content: center; */
text-align: center;
}
.user-group-filter{
padding-top:15px;
display: flex;
justify-content: center;
}
.service-error{
height: 10px;
font-size: 14px;
font-weight:900;
text-align: center;
color: #890804;
}
.page-title{
display: flex;
justify-content: space-between;
}
.service-allocation-error{
display: flex;
justify-content: center;
}
@media (max-width: 1440px){
.application-management-section{
width: 100%;
}
.application-management-btn-field{
width: 100%;
}
.application-management-container{
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 1250px){
.application-management-section .row-3 .row-3-2 div{
width: 25%;
}
}
@media (max-width: 1050px){
.application-management-section .row-3 .row-3-2{
overflow-y: auto;
}
.application-management-section .row-3 .row-3-2 div{
width: 40%;
}
}
@media (max-width: 1050px){
.application-management-section .row-3 .row-3-1{
margin: 0px;
}
.application-management-section{
padding:30px;
}
.application-management-section .row-1 input{
width: 50%;
margin-bottom: 15px;
}
.application-management-section .row-2{
margin-bottom: 15px;
}
}
@media (max-width: 615px){
.application-management-section .row-2 {
flex-wrap: wrap;
}
.application-management-section .row-2 div{
width: 30%;
justify-content: right;
margin: 5px;
}
.selection-filter{
width: 90%;
}
.selection-filter-label {
width: 30%;
}
.selection-filter-input {
width: 70%;
}
.application-management-section .row-2{
justify-content: center;
}
.application-management-section{
box-shadow:none;
width:100%
}
.application-management-section .row-1{
justify-content: center;
}
}
@media only screen and (min-width:481px) and (max-width:768px){
.service-allocation-option-container{
width: 20%;
}
}
@media (max-width: 450px){
.application-management-section .row-1 input{
width: 60%;
}
.application-management-section .row-2 div{
width: 40%;
}
.application-management-section .row-3 .row-3-2{
/* justify-content: center; */
}
.application-management-section .row-3 .row-3-2 div {
/* width: 70%; */
width:100%
}
.application-management-section .row-3 .row-3-2 div label{
width: 42%;
}
}
@media only screen and (min-width:320px) and (max-width:480px){
.service-allocation-options-container{
flex-direction: column;
width:100%;
}
.service-allocation-option-container{
width: 100%;
margin:2%;
}
.service-allocation-option-container label{
width: 40%;
}
.application-management-section{
padding-top: 0px;
}
}
@media (max-width: 370px){
.application-management-section .row-2 div{
width: 50%;
}
.application-management-btn-field button{
width: 50%;
}
}
.drpdwn-outer{
width: 50%;
position: relative;
}
.drpdwn-inner{
z-index: 4;
position: absolute;
overflow: hidden;
max-height: 200px;
width: 100%;
background-color: white;
border-bottom: solid 1px;
border-right: solid 1px;
border-left: solid 1px;
display: flex;
flex-direction: column;
}
.drpdwn-search{
color: black;
border: 2px solid #bbbb;
font-size: 13px;
width:100%;
background-size: 12px;
border-radius: 5px;
background: url(/assets/navIcons_search.svg) no-repeat right 2% center;
padding:3px 5px;
}
.drpdwn-input {
cursor: pointer;
display: flex;
padding:3px 5px;
min-width: 100%;
border:2px solid #bbbb;
border-radius: 5px;
}
.drpdown-content{
overflow: auto;
}
.input-content{
width: 90%;
display: flex;
align-items: center;
}
.cursorpointer::placeholder{
color:black;
}
.drpdwn-content{
border: solid 2px black;
padding: 5px;
}
.list-item {
font-size: 100%;
padding:3px 2px;
min-height: 25px;
}
.active-option{
color: white;
background-color: #289af5;
}
.mustering-event-history-container{
height: 100%;
width: 100%;
overflow: auto;
}
.dateChooser {
background:url(/assets/calendar-alt-solid.svg) no-repeat;
background-position: right 8px top 40%;
}
.event-container{
padding-top: 2%;
}
.event-container .status-bar{
display: flex;
width: 40%;
justify-content: space-between;
font-size: 13px;
}
.event-date-select{
width:95px ;
font-size:12px ;
color: "#606060";
}
.event-select{
width:100px ;
font-size:12px ;
color: "#606060";
}
.padding-left-3{
padding-left: 3.5%;
}
.mustering-event-history-title{
font-family: Open-Sans,sans-serif;
font-size: 13px;
font-weight: bold;
padding-top: 10px;
}
.mustering-event-history-selection-container{
display:flex;
padding-top:7px;
margin-bottom: 10px;
}
.mustering-event-history-selection{
padding-top:5px;
}
.mustering-event-history-selection-container .mustering-event-history-selection-option{
font-family: Open-Sans,sans-serif;
font-size: 13px;
font-weight: bold;
}
.mustering-event-history-view-details{
font-family: Open-Sans,sans-serif;
font-size: 13px;
}
.mustering-event-history-selection{
display: flex;
}
.mustering-event-history-date-and-event-selection .dateChooser {
height: 20%;
width:10%;
font-size: 11px;
font-family: Open-Sans,sans-serif;
border-radius: 5px;
}
.event-chooser{
height: 20%;
width:100%;
font-family: SF Pro Display, sans-serif;
border-radius: 8px;
border: 1px solid #707070;
}
.mustering-event-history-select-option{
display: flex;
padding-top: 8px;
padding-bottom: 5px;
}
.mustering-event-history-select-option .mustering-event-history-date-label{
font-family: Open-Sans,sans-serif;
font-size: 13px;
font-weight: bold;
width:12%;
}
.mustering-event-history-event-type-label{
font-family: Open-Sans,sans-serif;
font-size: 13px;
font-weight: bold;
margin-bottom: 3px;
}
.event-history-search-container {
display: flex;
margin-left:10px;
align-items: flex-end;
}
.alert-history-search-btn{
border: none;
font-family: Open-Sans,sans-serif;
height: 25px;
font-size: 12px;
border: 1px solid #707070;
background-color: #707070;
color: white;
padding: 2px 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
}
.event-history-btns{
background: white;
border:none;
font-size: 12px;
color: #9D9D9D;
padding:5px;
cursor: pointer;
margin-left: 10px;
}
.mustering-event-history-date-and-event-selection{
position: relative;
}
.request-service-date-picker-container{
position: absolute;
background:url(/assets/popup.svg) 0% 0% no-repeat;
z-index: 10;
background-position: top center;
width: 265px;
height: 262px;
background-size: cover;
padding: 17px 10px 10px 10px;
box-sizing: border-box;
}
.request-service-date{
width:100%;
border: 1px solid #707070;
height: 25px;
padding: 3px;
cursor: pointer;
border-radius: 5px;
font-size: 12px;
background:url(/assets/calendar-alt-solid.svg) no-repeat ;
background-position: right 8px top 40%;
}
.mustering-event-history-date-and-event-selection{
width: 100%;
align-items: flex-end;
}
.request-service-date::placeholder{
color:#606060;
padding-left: 3px;
}
.event-history-date-container{
width: 200px;
}
.event-history-search-container .alert-user-search[type="text"]{
background:none;
border-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-right: 5px;
border: 1px solid #707070;
}
.event-history-search-container .alert-user-search[type="text"]:focus{
outline: none;
}
.calender-margin{
margin-left: -4%;
margin-top: 6% !important
}
@media only screen and (min-width:320px) and (max-width:480px){
.mustering-event-history-selection-container{
flex-direction: column;
}
.mustering-event-history-selection-container .mustering-event-history-selection-option{
width:50%;
}
.mustering-event-history-selection-container .mustering-event-history-view-details{
margin-top: 2%;
}
.mustering-event-history-select-option .mustering-event-history-date-label{
width:48%;
}
.mustering-event-history-date-and-event-selection .dateChooser{
width: 45%;
}
.mustering-event-history-date-and-event-selection .event-history-search{
margin-top:3%;
width: 97%;
}
.mustering-event-history-inner-container .table-container .table-inner-container .table-body .table-data-row .table-data{
text-align: center;
}
.mustering-event-history-inner-container .table-container .table-inner-container .table-header .table-header-data{
text-align: center;
}
.request-service-date-picker-container{
width:265px;
height: 282px;
}
}
@media only screen and (min-width:481px) and (max-width:768px){
.mustering-event-history-selection-container .mustering-event-history-selection-option{
}
.mustering-event-history-select-option .mustering-event-history-date-label{
width:18.5%;
}
.mustering-event-history-date-and-event-selection .dateChooser {
width:13%;
}
.request-service-date{
width:100%;
}
.request-service-date-picker-container{
width:265px;
height: 270px;
}
}
@media only screen and (min-width:769px) and (max-width:990px){
.mustering-event-history-selection-container .mustering-event-history-selection-option{
width:22%;
}
.mustering-event-history-select-option .mustering-event-history-date-label{
width:17%;
}
.mustering-event-history-date-and-event-selection .dateChooser {
width:15%;
}
.request-service-date-picker-container{
width: 265px;
height: 278px;
padding:14px 14px 14px 14px;
}
}
@media(min-width:1024px) {
.mustering-event-history-selection-container .mustering-event-history-selection-option{
width:15%;
}
.mustering-event-history-select-option .mustering-event-history-date-label{
width:14%;
}
.mustering-event-history-selection .dateChooser {
width:11%;
}
.request-service-date-picker-container{
width: 265px;
height: 267px;
}
}
@media(min-width:1440px) {
.mustering-event-history-title{
font-size: 14px;
}
.mustering-event-history-selection-container{
padding-top:12px;
}
.mustering-event-history-selection-option{
font-size: 16px;
width:15%;
}
.mustering-event-history-view-details{
font-size: 14px;
}
.mustering-event-history-date-label{
font-size: 14px;
width:12%;
}
.mustering-event-history-event-type-label{
font-size: 14px;
}
.mustering-event-history-selection .dateChooser {
width:10%;
font-size: 13px;
}
.mustering-event-history-selection{
padding-top:7px ;
}
.event-history-search::placeholder{
padding-left: 34px;
}
}
.event-history-event-type-container{
width: 200px;
margin-left: 10px;
}
.mustering-event-history-date-label{
font-family: Open-Sans,sans-serif;
font-size: 13px;
font-weight: bold;
margin-bottom: 3px;
}
@media (max-width: 640px){
.mustering-event-history-date-and-event-selection{
flex-direction: column;
align-items: flex-start;
}
.mustering-event-history-date-and-event-selection .event-chooser{
margin: 0px;
}
.event-history-date-container{
margin-bottom: 10px;
}
.event-history-event-type-container{
margin-bottom: 10px;
margin-left: 0px;
}
.event-history-search-container{
margin-left: 0px;
margin-bottom: 10px;
}
}
.calender-content{
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.calender-header-title{
width: 100%;
}
.calender-header-title-container{
width:80%;
}
.calender-header-next-prev{
width:20%;
text-align: center;
}
.calender-header-week-days-container{
width: 100%;
}
.calender-header-week-day{
width: 14.28%;
color: #333333;
font-size: 14px;
text-align: center;
font-weight: bold;
}
.calender-header-next-icon{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
cursor: pointer;
}
.calender-header-prev-icon{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
cursor: pointer;
}
.calender-popup-content .calender-header-next-icon{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #448ccb;
cursor: pointer;
}
.calender-popup-content .calender-header-prev-icon{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #448ccb;
cursor: pointer;
}
.calender-days-container{
width: 100%;
font-size: 14px;
}
.calender-day{
color: #333333;
float: left;
width: 14.28%;
text-align: center;
box-sizing: border-box;
}
.calender-popup-content .calender-day div{
padding: 8px;
height: 80%;
width: 80%;
box-sizing: border-box;
}
.calender-day div{
padding: 10px;
height: 80%;
width: 80%;
box-sizing: border-box;
}
.calender-prev-month-day{
cursor: pointer;
opacity: 0.6;
}
.calender-prev-month-day div{
width: 100%;
height: 100%;
}
.calender-prev-next-month-day{
opacity: 0.6;
}
.calender-current-month-day div:hover,
.calender-current-month-day div:active{
background-color: #CCCCCC;
border-radius: 20px;
}
.cursor-pointer{
cursor: pointer;
}
.calender-current-month-day .active,
.calender-current-month-day .current{
box-shadow: 0px 3px 3px #0000005C;
color: #fff;
font-weight: bold;
border-radius: 20px;
}
.calender-current-month-day .highlighted{
padding: 1px !important;
height: 2px !important;
width: 80% !important;
background-color: black;
border-radius: 4px !important;
}
.current .highlighted,
.active .highlighted{
background-color: white;
}
.calender-current-month-day .current{
background-color: #448ccb;
}
.calender-current-month-day .active {
background-color: #CCCCCC !important;
}
.displayFlex{
display: flex;
}
.flexAlignCenterJustifyCenter {
display: flex;
justify-content: center;
}
.cursor-not-allowed{
cursor:no-drop;
background:#EAE7E7 ;
}
.download-content-container{
height: auto;
width: 48%;
max-height: 95%;
overflow-y: auto;
}
.download-content-section{
padding:10px;
font-family: Open-Sans,sans-serif;
font-size: 14px;
}
.download-content-title{
font-weight: bold;
margin-bottom: 15px;
}
.download-content-row-element{
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
align-items: flex-end;
margin-bottom: 20px;
}
.field-type-label{
cursor: pointer;
}
.download-radio-container{
display: flex;
align-items: center;
}
.download-radio-container label{
margin-right: 10px;
}
.download-content-row-element input[type="text"]{
width: 60%;
margin: 0px;
margin-left: 10px;
border-radius: unset;
}
.download-content-row-element input[type="radio"]{
margin-right: 5px;
}
.download-report-label{
font-weight: bold;
}
.download-btn-row{
justify-content: center;
margin-bottom: 0px;
margin-top:10px
}
.download-btn-row button{
font-weight: normal;
font-size: 14px;
font-family: inherit;
}
.download-content-container .download-report-error-ctr{
height: 15px;
font-weight: bold;
font-size: 12px;
text-align: center;
font-family: 'Open-Sans';
}
@media (min-width: 1440px){
.download-content-container{
width: 35%;
}
}
@media (max-width: 960px){
.download-content-container{
width: 60%;
}
.download-content-row-element input[type="text"]{
width: 70%;
margin: 0px;
}
.download-content-field-name{
width: 20%;
}
}
@media (max-width: 640px){
.download-content-container{
width: 80%;
}
}
@media (max-width: 480px){
.download-content-container{
width: 90%;
}
.download-content-field-name{
width: 100%;
margin-bottom: 10px;
}
.download-content-row-element input[type="text"]{
margin: 0px;
width: 100%;
}
}
.specific-event-history-container{
height: 100%;
width: 100%;
overflow: auto;
font-size: 14px;
}
.specific-event-history-container input[type="checkbox"]{
border: none;
cursor: default;
}
.specific-event-history-container .top-content{
height: auto;
}
.specific-even-top-content-title{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.alarm-cleared-by-name-ctr, .alarm-triggered-by-name-ctr{
font-weight: bold;
}
.alarm-cleared-by-ctr, .alarm-triggered-by-ctr {
margin-bottom: 10px;
}
.alarm-triggered-details-ctr{
font-family: Open-Sans,sans-serif;
font-size:14px;
display: flex;
flex-wrap: wrap;
}
.alarm-triggered-by-ctr{
margin-right: 30px;
}
.download-report-btn-field{
margin-bottom: 10px;
}
.specific-even-top-content-row-1{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.status-bar-conatiner{
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.specific-event-history-container{
overflow: auto;
}
.status-bar-conatiner div{
margin-right: 10px;
margin-bottom: 10px;
}
.specific-even-top-content-title p{
font-size: 14px;
font-weight: bold;
}
.back-to-history{
margin-left: auto;
}
.status-bar-conatiner .back-to-history button{
background-color: white;
white-space: nowrap;
cursor: pointer;
color: black;
border: none;
font-family: SF Pro Display, sans-serif;
font-size: 15px;
font-weight: bold;
display: flex;
align-items: center;
}
.download_icon{
height: 18px;
margin-left: 9px;
}
.download_btn{
padding: unset;
height: 40px;
}
@media (max-width: 1210px) {
.specific-event-history-container .top-content{
margin-top: 10px;
}
}
@media (max-width: 480px){
.specific-event-history-container .table-page-entry-container{
justify-content: center;
margin-top: 10px;
}
}
.account-page-container{
width: 100%;
height: 100%;
overflow: auto;
}
.account-action-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.account-search-input{
color: black;
border: 2px solid #bbbb;
font-size: 13px;
border-radius: 5px;
padding:3px 5px;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
margin-right: 5px;
}
.add-account-modal{
width: 60%;
max-height: 95%;
display: flex;
flex-direction: column;
}
.account-form-container{
width: 100%;
}
.account-label-input-container{
width: 100%;
display: flex;
padding: 10px;
flex-wrap: wrap;
padding-bottom: 0px;
}
.account-label-container{
width: 35%;
font-size: 14px;
}
.account-input-container{
width: 65%;
}
.input-error-message{
height: 10px;
font-size: 11px;
text-align: right;
color: #890804;
}
.account-input{
outline: none;
border: none;
color: black;
border: 2px solid #bbbb;
font-size: 13px;
border-radius: 5px;
padding: 3px 5px;
width: 100%;
}
.account-input.invalid{
border: 2px solid #890804 !important;
}
.account-input:active,
.account-input:focus{
border: 2px solid #000;
}
.account-inner-form-container{
width: 99%;
margin-left: 1%;
}
.account-inner-form-title{
font-size: 14px;
font-weight: bold;
}
.account-filter-ctr{
display: flex;
align-items: center;
margin-right: 10px;
margin-top: 12px;
}
@media only screen and (max-width:768px) {
.account-label-container{
width: 100%;
}
.account-input-container{
width: 100%;
}
.account-label-input-container{
padding: 5px;
}
.add-account-modal{
width: 90%;
}
}
@media only screen and (min-width:1440px) {
.add-account-modal {
width: 50%;
}
}
@media only screen and (max-width:480px) {
.account-search-input{
margin-right: 0px;
}
}
.facility-page-container{
width: 100%;
height: 100%;
overflow: auto;
}
.facility-action-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.facility-search-input{
color: black;
border: 2px solid #bbbb;
font-size: 13px;
border-radius: 5px;
padding:3px 5px;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
margin-right: 5px;
}
.add-facility-modal{
width: 50%;
padding: 10px;
display: flex;
flex-direction: column;
max-height: 95%;
padding: 15px;
}
.facility-form-container{
width: 100%;
}
.facility-label-input-container{
width: 100%;
display: flex;
padding: 10px;
flex-wrap: wrap;
padding-bottom: 0px;
}
.facility-label-container{
width: 35%;
font-size: 14px;
}
.facility-input-container{
width: 65%;
}
.facility-input{
outline: none;
border: none;
color: black;
border: 2px solid #bbbb;
font-size: 13px;
border-radius: 5px;
padding: 3px 5px;
width: 100%;
}
.facility-input.invalid{
border: 2px solid #890804 !important;
}
.facility-input:active,
.facility-input:focus{
border: 2px solid #000;
}
.facility-inner-form-container{
width: 99%;
margin-left: 1%;
}
.facility-inner-form-title{
font-size: 14px;
font-weight: bold;
}
.facility-image-view{
height: 120px;
width: 120px;
display: flex;
padding: 5px;
margin: auto;
}
.facility-button-arrange {
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media only screen and (max-width:768px) {
.facility-label-container{
width: 100%;
}
.facility-input-container{
width: 100%;
}
.facility-label-input-container{
padding: 5px;
}
.add-facility-modal{
width: 90%;
}
}
@media only screen and (min-width:1440px) {
.add-facility-modal {
width: 50%;
}
}
@media only screen and (min-width:1800px) {
.add-facility-modal {
height: auto;
}
}
@media only screen and (max-width:380px) {
.facility-button-arrange {
flex-direction: column;
}
.download_btn{
margin-top: 10px;
}
}
.integrations-page-container{
width: 100%;
height: 100%;
overflow: auto;
}
.integrations-action-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.integrations-search-input{
color: black;
border: 2px solid #bbbb;
font-size: 13px;
border-radius: 5px;
padding:3px 5px;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
margin-right: 5px;
}
.add-integrations-modal{
width: 50%;
height: auto;
max-height: 95%;
padding: 15px;
display: flex;
flex-direction: column;
}
.add-integration-model-content{
max-height: 99%;
overflow: auto;
}
.integrations-form-container{
width: 100%;
}
.integrations-label-input-container{
width: 100%;
display: flex;
padding: 10px;
flex-wrap: wrap;
padding-bottom: 0px;
}
.integrations-label-container{
width: 35%;
font-size: 14px;
}
.integrations-input-container{
width: 65%;
}
.integrations-input{
outline: none;
border: none;
color: black;
border: 2px solid #bbbb;
font-size: 13px;
border-radius: 5px;
padding: 3px 5px;
width: 100%;
}
.integrations-input.invalid{
border: 2px solid #890804 !important;
}
.integrations-input:active,
.integrations-input:focus{
border: 2px solid #000;
}
.integrations-inner-form-container{
width: 99%;
margin-left: 1%;
}
.integrations-inner-form-title{
font-size: 14px;
font-weight: bold;
}
.integrations-image-view{
height: 120px;
width: 120px;
display: flex;
padding: 5px;
margin: auto;
}
@media only screen and (max-width:768px) {
.integrations-label-container{
width: 100%;
}
.integrations-input-container{
width: 100%;
}
.integrations-label-input-container{
padding: 5px;
}
.add-integrations-modal{
width: 90%;
}
}
@media only screen and (max-height:768px) {
.add-integrations-modal{
height: 78%;
}
}
@media only screen and (min-width:1440px) {
.add-integrations-modal {
width: 50%;
}
}
@media only screen and (max-width:480px) {
.integrations-search-input{
margin: 0px;
}
}
.create-view-alert-container {
font-size: 13px;
overflow: auto;
}
.alert-bold-label{
font-weight: bold;
margin: 5px 0px;
font-size: 14px;
}
.alert-filter-container{
display: flex;
align-items: flex-end;
margin-top: 10px;
}
.alert-select-filter{
display: flex;
flex-direction: column;
width: 20%;
}
.alert-select-filter select{
border: 2px solid #bbbb;
}
.alert-search-filter input{
border:1px solid #707070;
}
@media (max-width:640px) {
.create-view-alert-container .table-data button{
width: 100%;
font-size: 10px;
}
}
@media (max-width: 480px){
.alert-select-filter{
width: 50%;
}
.create-view-alert-container .table-data{
font-size: 11px;
}
}
.create-alert-container{
font-family: Open-Sans,sans-serif;
font-size: 13px;
height: 100%;
padding: 5px 15px;
overflow: auto;
display: flex;
flex-direction: column;
}
.align{
width: 11px;
display: flex;
align-items: center;
justify-content: center;
}
.event-name-input-box input{
width: 50%;
font-size: 13px;
font-weight: bold;
border-radius: 0px;
font-family: Open-Sans,sans-serif;
}
.event-title-input-box{
font-weight: bold;
margin-bottom: 5px;
}
.create-alert-selection-container{
width: 100%;
flex:1;
-webkit-flex:1;
display: flex;
justify-content: space-between;
padding-bottom: 5px;
margin-top: 25px;
}
.event-name-input-box{
margin-bottom: 5px;
}
.create-alert-icon-color-selection-container{
display: flex;
align-items:flex-end;
margin: 7px 0px;
}
.create-alert-select-btn-container{
display: flex;
flex-direction: column;
width: 240px;
margin-right: 2%;
}
.create-alert-select-btn-container label{
font-weight: bold;
margin-bottom: 7px;
}
.create-alert-select-btn-container .invalid{
color:#890804;
}
.create-alert-user-unselected-list{
width: 45%;
height: 100%;
}
.create-alert-user-unselected-list .ccard{
height: 90%;
}
.create-alert-user-selected-list{
width: 45%;
}
.create-alert-user-selected-list .ccard{
height: 90%;
}
.create-alert-container .label-checkbox-container{
display: flex;
margin: 10px 0px;
}
.create-alert-container .label-checkbox-container div{
display: flex;
margin-left: 10px
}
.create-alert-container .label-checkbox-container .label-checkbox-title{
font-weight: bold;
}
.create-alert-container .label-checkbox-container div input[type="checkbox"]{
margin-left: 5px;
width: 15px;
height: 15px;
font-size: 10px;
}
.add-new-icon-btn{
height: 25px;
display: flex;
align-items: center;
margin-bottom: 7px;
width: 20%;
}
.add-new-icon-btn-ctr{
width: 100%;
display: flex;
}
.add_icon_symbol{
margin: 3%;
}
.add_icon_btn{
background-color: transparent;
border: none;
color: #438afe;
}
.add-new-icon-btn,.add-new-icon-btn button{
cursor: pointer;
}
.create-alert-btn-container{
display: flex;
justify-content: center;
margin-top: 20px;
}
.dropdown {
width:100%;
position: relative;
user-select: none;
cursor: pointer;
}
.dropdown .dropdown-btn{
padding:10px;
background-color: #ffff;
border:1px solid #EDF1F7;
font-weight: bold;
color: #333;
display: flex;
justify-content: space-between;
color: #222B45;
font: normal normal bold 12px/20px Poppins;
border-radius: 3px;
}
.dropdown .dropdown-content{
z-index: 99;
position: absolute;
padding:10px;
background: #fff;
box-shadow: 3px 3px 10px 6px rgba(0,0,0,0.06);
color:#333;
width: 100%;
border-radius: 5px;
font: normal normal medium 15px/28px SF Pro Display;
}
.dropdown .dropdown-content .dropdown-item{
padding:10px;
cursor: pointer;
transition: all 0.2s;
display: flex;
}
.dropdown .dropdown-content .dropdown-item:hover{
background: #E8E7E7;
}
.dropdown-content .dropdown-item .select-box-icon svg{
height: 100%;
}
.selected-value{
padding-left:12px;
word-break: break-all;
}
.drop-down-arrow{
width:70%;
}
.drop-down-arrow-rotation{
width:70%;
transform: rotate(180deg);
}
.select-box-value{
margin-left:12%;
text-align:left;
word-break: break-all
}
.create-alert-required-text{
color: #890804;
font-weight: bold;
}
.enable-description-checkbox-ctr input[type="checkbox"]{
margin-right: 5px;
border: 2px solid black;
width: 17px;
height: 17px;
}
.enable-description-checkbox-ctr {
font-family: SF Pro Display, sans-serif;
letter-spacing: 1px;
flex-wrap: wrap;
}
.enable-description-label{
cursor: pointer;
font-size: 13px;
letter-spacing: 1px;
}
.select-card{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px;
margin-top: 10px;
}
.select-card button{
width: 120px;
letter-spacing: 1.13px;
-webkit-text-fill-color: #1E2022;
font-size:16px;
font-family: Open-Sans,sans-serif;
background: #ffffff;
border: 0px;
}
.select-card button:hover{
cursor: pointer;
}
.card-selected{
font-weight: bold;
}
.vertical-line{
width: 0px;
border-left: 1px solid #7C7A7A38;
height: 22px;
margin: 0px;
}
.manage-description-container{
display: flex;
flex-direction: column;
width: 100%;
margin-top: 15px;
}
.manage-description-container p{
font-family: Open-Sans, sans-serif;
letter-spacing: 0.4px;
font-size: 11px;
color: #333333;
margin-left: 7px;
font-weight: normal;
}
.enabled-description-container{
display: flex;
flex-direction: column;
width: 100%;
margin-top: 4px;
font-family: Open-Sans, sans-serif;
letter-spacing: 0.4px;
font-size: 11px;
color: #333333;
}
.enabled-description-container label{
font-weight: bold;
color: black;
}
.enabled-description-label{
margin-top: 9px;
margin-left: 50px;
}
.auto-reset-ctr p{
width: 85%;
}
.auto-reset-ctr{
display: flex;
}
.auto-reset-label {
margin-top: 2px;
}
.auto-reset-label-ctr{
display: flex;
width: 85%;
}
@media (max-width: 700px){
.select-card button{
width: 108px;
}
}
@media (min-width: 700px) and (max-width:912px){
.add-new-icon-btn{
margin-left: 0px;
}
}
@media (max-width:600px) {
.create-alert-modal{
width: 90%;
}
.create-alert-modal{
width: 90%;
}
.select-card button{
width: 108px
}
}
@media (max-width:400px) {
.create-alert-modal{
width: 90%;
}
.create-alert-modal{
width: 90%;
}
.select-card button{
width: 108px
}
}
@media (max-width: 480px){
.create-alert-container{
display: block;
}
.create-alert-user-unselected-list,.create-alert-user-selected-list{
width: 95%;
}
.create-alert-selection-container .user-list-option-container-list{
flex-direction: row;
width: auto;
margin-top: 15px;
}
.ccard{
max-height: 50px;
}
.create-alert-icon-color-selection-container{
flex-direction: column;
align-items: flex-start;
}
.add-new-icon-btn {
margin: 0px;
margin-top: 10px;
width: 41%;
}
.event-name-input-box input{
width: 80%;
}
.select-card{
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
.select-card button{
font-size: small;
}
.card-container {
display: flex;
justify-content: center;
align-items: center;}
.vertical-line{
width: 0px;
}
}
@media (max-width: 370px){
.select-card button{
width: 30%;
font-size: small;
}
}
@media (max-width: 1020px){
.auto-reset-label-ctr p {
margin: unset;
}
.auto-reset-label-ctr{
display: block;
}
}
@media (max-width: 640px){
.create-alert-selection-container{
flex-direction: column;
height:auto;
}
.user-list-option-container-list{
flex-direction: row;
width: auto;
margin-top: 15px;
}
}
.color-picker{
flex-direction: column;
position: relative;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.colors{
max-height: 250px;
z-index: 1;
padding-top: 0px !important;
padding-left: 0px !important;
}
.colors > div > span > div {
margin-right: 0px!important;
margin-bottom: 0px!important;
width: 20px !important;
height: 20px!important;
}
.recent-color-circle {
display: inline-block;
width :17px;
height: 17px;
border-radius: 50%;
border: 1px solid #eee;
margin-right: 2px;
box-shadow: 3px 3px 6px #00000029;;
}
.color-selector {
display: flex;
align-items: center;
margin: 0 auto;
border: 1px solid #EDF1F7;
border-radius: 3px;
position: relative;
font-family: verdana;
background: white;
width: 100%;
height: 41px;
padding: 10px;
}
.color-picker-container{
display:flex;
flex-direction:column;
height:247px;
width: 240px;
box-shadow: 3px 3px 6px #00000029;
position: absolute;
z-index: 89;
background: #fff;
box-shadow: 3px 3px 10px 6px rgba(0, 0, 0, 0.06);
color: #333;
border-radius: 5px;
overflow-y: auto;
}
.flexbox-fix{
display: none !important;
}
.color-picker-container :first-child :first-child{
box-shadow: unset !important;
}
.inValidDropdown{
border: 1px solid #890804 !important;
}
.invalidColor{
color: #890804;
}
.recently-used-color-container{
height:45px;
display:flex;
flex-direction:column;
width:240px;
overflow:auto;
margin-top: 2px;
}
.colors > div > span > div:hover{
border: 2px solid #ffffff !important;
border-radius: 2px;
}
.recently-used-color-container :first-child{
font-family: SF Pro Display,sans-serif;
letter-spacing: 0.75px;
color: #3C3C4399;;
padding-left:7px;
padding-top: 2px;
font-size: 11px;
margin-bottom: 6px;
}
.recently-used-color-render{
display: flex;
margin-left: 5px;
}
.color-picker > div > span{
font: normal normal bold 12px / 20px Poppins;
}
.selectedColor{
width: 84%;
margin-left: 5px;
}
.recent-color-circle:hover{
border: 2px solid #ffffff !important;
border-radius: 50%;
}
.roles-page{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
}
.roles-container{
display:flex;
justify-content: space-between;
}
.roles-listing-conatiner{
width:34%;
}
.role-card-ctr{
width: 48%;
}
.creating-roles-conatiner{
width:65%;
margin-right: 10px;
margin-top: 10px;
}
.create-role-description{
margin-top:5%;
font: normal normal normal 13px/18px SF Pro Display;
color: #ACB1C0;
width: 95%;
}
.roles-list{
margin-top:5%
}
.roles-list .table-container .table-options-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.roles-list .table-container .table-page-entry-container{
justify-content: flex-end;
}
.roles-list .table-container .table-entry-container{
margin: 10px 10px 10px 0px;
}
.roles-list .table-container .table-inner-container .table-body .table-data-row .table-data{
height:52px;
border-bottom: none;
}
.roles-container input[type="text"]::placeholder,.roles-container input[type="text"]{
color:#448CCB;
font-weight: bold;
letter-spacing: 1px;
}
.role-header-input{
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.role-checkbox-ctr{
display: flex;
align-items: flex-start;
margin-right: 20px;
}
.role-checkbox-ctr input[type="checkbox"]{
width: 15px;
height: 15px;
font-size: 10px;
margin-right: 5px;
}
.role-checkbox-ctr p{
font-family: SF Pro Display, sans-serif;
font-size: 15px;
letter-spacing: 0.32px;
color: #707070;
}
.role-error-msg{
font-size: 13px;
color: #890804;
font-weight: bold;
letter-spacing: 1px;
margin-top: 10px;
height: 12px;
}
.role-name-ctr{
display: flex;
flex-direction: column;
margin-right: 20px;
}
.role-name-ctr label{
font-family: inherit;
font-size: 14px;
margin-bottom: 2px;
font-weight: bold;
}
.role-header-input input[type='text']{
outline: 0;
border: none;
border-bottom:2px solid #448CCB;
font-family: Open-Sans,sans-serif;
font-size: 12px;
color:#448CCB;
padding: 5px;
}
.role-save-button{
width: fit-content;
margin-right: unset;
}
.role-form-description{
font-family: Open-Sans,sans-serif;
font-size: 12px;
font-weight: bold;
margin-top: 2%;
}
.role-form-description-details{
font: normal normal normal 13px/18px SF Pro Display;
color: #ACB1C0;
margin-top: 1%;
}
.mobile-app-permission,.web-app-permission{
display: flex;
margin-top: 2%;
align-items: center;
}
.mobile-permission-card-container{
align-items: center;
width: 100%;
display: flex;
}
.mobile-permission-card-container .group-management-card-label .choose-all-ctr{
display: flex;
align-items: center;
}
.icon{
margin-top: 12px;
padding:10px;
flex-direction: column;
}
.roles-web-admin-permission-title{
font-weight:bold;
font-size:12px;
margin-top: 2%;
font-family: Open-Sans,sans-serif;
}
.roles-web-admin-permission-title-description{
font: normal normal normal 13px/18px SF Pro Display;
color: #ACB1C0;
margin-top: 1%;
}
@media (max-width: 1025px){
.mobile-app-permission,.web-app-permission{
flex-direction: column;
}
.role-card-ctr{
width: 100%;
}
.mobile-app-permission .icon{
flex-direction: row;
}
.web-app-permission .icon{
flex-direction: row;
}
.mobile-app-permission .icon svg{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
margin-bottom: 10px;
cursor: pointer;
}
.web-app-permission .icon svg{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
margin-bottom: 10px;
cursor: pointer;
}
.role-header-input{
flex-direction: column;
width: 100%;
align-items: unset;
}
.role-name-ctr{
margin: 0px;
margin-bottom: 20px;
width: 50%;
}
.role-checkbox-ctr{
margin: 0px;
margin-bottom: 20px;
width: 100%;
}
}
@media (max-width: 960px){
.roles-list .table-container .table-page-entry-container{
font-size: 12px;
}
.role-card-ctr{
width: 100%;
}
.mobile-permission-card-container{
align-items: center;
}
.creating-roles-conatiner{
width: 60%;
}
}
@media(max-width:768px){
.roles-list .table-container .table-page-entry-container{
font-size: 10px;
}
.roles-list .table-container .table-inner-container{
overflow: hidden;
}
}
@media (min-width:750px) and (max-width:960px){
.roles-listing-conatiner{
width:44%
}
}
@media (max-width: 640px){
.roles-container{
flex-direction: column;
}
.roles-listing-conatiner {
width: 100%;
}
.creating-roles-conatiner{
width: 100%;
}
}
@media (max-width: 480px){
.creating-roles-conatiner{
width: 100%;
}
.role-header-input{
width: 100%;
}
}
@media (min-width:960px) and (max-width:1024px){
.roles-listing-conatiner{
width:35%
}
}
.add-mustering-location-ctr{
max-height: 95%;
display: flex;
flex-direction: column;
}
.add-mustering-location-section{
font-family: Open-Sans,sans-serif;
font-size:14px;
max-height: 99%;
overflow: auto;
}
.add-mustering-loc-btn-ctr
.group-management-container{
margin: 10px 0px;
}
.add-mustering-location-ctr .group-management-card-container{
display: flex;
margin-bottom: 10px;
}
.add-mustering-location-ctr .card-search-container{
display: flex;
}
.add-mustering-loc-btn-ctr{
margin-top: 10px;
display: flex;
justify-content: center;
}
.add-mustering-location-title{
font-weight: bold;
margin-bottom: 5px;
}
.add-mustering-location-label{
font-weight: bold;
}
.add-mustering-location-input{
width: 50%;
font-family: inherit;
}
.add-mustering-location-input input{
border-radius: 0px;
}
.add-mustering-location-ctr .user-list-row{
padding: 2px;
margin-bottom:3px;
cursor: pointer;
min-height: 25px;
}
@media (max-width: 960px){
.add-mustering-location-ctr{
width: 80%;
}
}
@media (max-width: 640px){
.add-mustering-location-ctr{
width: 70%;
height: 95%;
}
}
@media (max-width: 480px){
.add-mustering-location-ctr{
width: 90%;
height: 97%;
}
.add-mustering-location-section{
padding-right: 5px;
}
}
.mustering-location-container{
font-family: Open-Sans,sans-serif;
overflow: auto;
}
.add-mustering-location-btn{
border: none;
font-family: inherit;
padding: 10px 15px;
border-radius: 5px;
color: white;
background-color: #448CCB;
margin: 10px 0px;
font-size: 14px;
cursor: pointer;
}
.mustering-location-search-filter{
width: 25%;
display: flex;
align-items: center;
margin-top: 10px;
}
.mustering-location-search-filter input{
font-family: inherit;
}
@media (max-width: 640px){
.mustering-location-search-filter{
width: 40%;
}
}
@media (max-width: 480px){
.mustering-location-search-filter{
width: 80%;
}
.mustering-location-container .table-page-entry-container{
margin-top: 10px;
}
}
.property-details-container{
font-family: Poppins-regular, sans-serif;
font-size: 14px;
font-weight:bold;
max-height: 100%;
overflow: auto;
}
.property-detail-section{
width: 40%;
display: flex;
flex-direction: column;
}
.property-detail-card-section{
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 10px 20px #00000034;
padding: 10px;
border-radius:5px;
}
.zip-country-ctr{
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}
.property-detail-card-section label{
font-size: 14px;
}
.property-detail-card-section .invalid{
border: 1.5px solid #890804 !important;
}
.property-detail-card-section input{
box-shadow: 0px 5px 8px #00000029;
border: 1px solid #333333;
border-radius: 4px;
padding: 3px;
width: 100%;
display: block;
margin: 5px 0px;
margin-bottom: 10px;
}
.Address-title{
color: #448CCB;
}
.street-suit-ctr{
display: flex;
margin-bottom: 10px;
}
.street-input{
width: 90%;
margin-right: 20px;
}
.city-state-zip-ctr{
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 10px;
}
.property-detail-card-section .input-error-message{
font-family: Open-Sans, sans-serif;
letter-spacing: 1px;
}
.city-state-zip-ctr .input-error-message{
margin-top: 10px;
}
.street-2-ctr{
margin-bottom: 20px;
}
.city-state-zip-ctr label{
word-wrap: break-word;
}
.city-state-zip-ctr input{
margin-bottom: 0px;
}
.property-ctr , .address-ctr{
width: 95%;
}
.property-ctr{
margin-bottom: 5px;
}
.no-change-error{
margin: 10px 0px;
text-align: center;
margin-top: 0px;
}
.state-province-select-ctr select{
width: 80%;
box-shadow: 0px 5px 8px #00000029;
border: 1px solid #333333;
border-radius: 4px;
padding: 3px;
margin-top: 3px;
}
.city-input-ctr{
width: 48%;
}
.state-province-select-ctr{
width: 48%;
}
.zipcode-input-ctr{
width: 48%;
}
.country-select-ctr{
flex-direction: column;
width: 48%;
}
.country-select-ctr select{
box-shadow: 0px 5px 8px #00000029;
border: 1px solid #333333;
border-radius: 4px;
}
.property-btn-ctr{
display: flex;
justify-content: center;
}
@media (min-width: 1440px){
.property-detail-section{
width: 30%;
}
}
@media (max-width: 960px){
.property-detail-section{
width: 55%;
}
}
@media (max-width: 640px){
.property-detail-section{
width: 75%;
}
}
@media (max-width: 480px){
.city-state-zip-ctr{
flex-direction: column;
align-items: flex-start;
}
.city-input-ctr{
width: 70%;
}
.state-province-select-ctr{
width: 70%;
}
.zipcode-input-ctr{
width: 70%;
}
.property-detail-section{
width: 100%;
}
.property-detail-card-section label{
font-size: 11px;
}
}
/* Add User */
.add-user-container{
overflow: auto;
}
.add-user-header{
margin: 3px 0px 5px 2px;
}
.add-user-inner-container{
display: flex;
width: 100%;
}
.Add-user-content-container{
box-shadow: 0px 10px 20px #00000034;
padding: 15px;
padding-right: 10px;
border-radius: 10px;
color: black;
font-size: 12px;
font-family: Open-Sans,sans-serif;
letter-spacing: 1px;
display: flex;
overflow: auto;
flex-direction: column;
width: 95%;
margin: auto;
}
.Add-user-content-container .card-list-mobile, .Add-user-content-container .filter-list-mobile{
display: none;
}
.add-sub-ctr-1{
width: 35%;
flex-direction: column;
}
.invalid-text-error{
color:#890804
}
.add-sub-ctr-2{
width:65%;
flex-direction: column;
}
.Add-user-content-container div{
margin-bottom: 10px;
}
.Add-user-content-container div div {
display: flex;
}
.Add-user-content-container div div{
margin-bottom: 0px;
}
.Add-user-content-container .filter-container{
width: 100%;
}
.image-container{
width: 35% !important;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5px;
}
.personal-details-input-container{
width: 70%;
display: flex;
flex-direction: column;
}
.contact-input-container{
width: 90%;
display: flex;
flex-direction: column;
}
.Add-user-content-container .image-container span{
font-size: 9px;
text-align: center;
font-weight: bold;
}
.name-input-container{
width: 90%;
}
.Add-user-content-container .name-input-container{
display: flex;
}
.Add-user-content-container .row-2 label{
cursor: pointer;
}
.user-list-option-container-list svg{
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.Add-user-content-container .person-input-container span img{
width:9px;
margin-right: 5px;
}
.Add-user-content-container .person-input-container .name-input-container input{
display: inline;
width: 100%;
margin: 5px 5px 5px 0px;
}
.Add-user-content-container .person-input-container .name-input-container {
flex-direction: row;
}
.Add-user-content-container .person-input-container{
display: flex;
flex-direction: row;
}
.Add-user-content-container .contact-input-container span{
margin-bottom: 5px;
}
.Add-user-content-container input[type="text"],
.Add-user-content-container input[type="email"],
.Add-user-content-container input[type="number"]{
font-size: 12px;
font-family: Open-Sans,sans-serif;
letter-spacing: 1px;
color:#77838F;
border-radius: 0px;
}
.Add-user-content-container .name-input-container input[type="text"]{
color: black;
font-weight: bold;
}
.Add-user-content-container .row-3 select,.Add-user-content-container .row-4 select{
width: 50%;
padding: 2px 7px;
font-size: 12px;
font-family: Open-Sans,sans-serif;
color:#77838F;
letter-spacing: 1px;
}
.Add-user-content-container .group-management-title{
font-weight: bold;
margin-bottom: 5px;
}
.Add-user-content-container .row-2 .role-container{
display: flex;
flex-wrap: wrap;
border: none;
}
.Add-user-content-container div h4{
margin-bottom: 5px;
}
.Add-user-content-container .required-text{
color:#890804;
align-items: flex-end;
font-size: 16px;
font-family: SF Pro Display,sans-serif;
}
.Add-user-content-container .row-2 .role-container input{
margin-right: 10px;
border: 2px solid black;
}
.Add-user-content-container .row-2 .role-container input[type="radio"]{
background: #dadada 0% 0% no-repeat padding-box;
border: 3px solid #fdfdfd;
}
.Add-user-content-container .row-2 .role-container input[type="radio"]:checked{
border: 3px solid #fdfdfd;
background: #448CCB 0% 0% no-repeat padding-box;
}
.Add-user-content-container .row-2 .role-container div{
display: flex;
align-items: center;
}
.Add-user-content-container .row-2 .role-container div label{
margin-right: 5px;
}
.Add-user-content-container .person-input-container .image-container{
width: 30%;
height: 85%;
align-self: center;
}
.Add-user-content-container .row-4{
margin-bottom: 10px;
}
.Add-user-content-container .row-5{
margin-bottom: 10px;
}
.Add-user-content-container .row-4 input{
width: 40%;
margin: 0px;
}
.Add-user-content-container .row-5 input{
width: 40%;
margin: 0px;
}
.user-selection-id{
font-size: 13px;
color: #555555;
}
.user-image-view{
height: 80%;
width: 90%;
border-radius: 50%;
padding: 0px;
cursor: pointer;
border: 1px solid grey;
}
.Add-user-content-container .add-inner-image-ctr{
width: 110px;
height: 110px;
}
.Add-user-content-container .image-container .add-user-inner-x{
font-size: 20px;
width: 35px;
height: 35px;
bottom: 15px;
right: 10px;
font-weight: normal;
}
.image-file-upload-input{
visibility: hidden;
height: 0;
}
.user-page-select{
width: 95%;
}
.profile-contact-image{
width: 15px;
height: 15px;
margin: 0px 5px;
}
.contact-inner-input-container{
display: flex;
flex-direction: row;
align-items: center;
}
.contact-email-input{
width: 100%;
margin: 5px 5px 5px 0px;
display: flex;
flex-direction: row;
}
.contact-phone-input{
width: 100%;
margin: 5px 5px 5px 0px;
display: flex;
flex-direction: row;
}
.contact-location-input{
width: 100%;
margin: 5px 5px 5px 0px;
display: flex;
flex-direction: row;
}
.user-page-search-container{
margin: 20px 0px 0px 0px;
}
.Add-user-content-container a{
text-decoration: none;
color: black;
font-weight: bold;
}
.Add-user-content-container div div{
display: flex;;
}
.Add-user-content-container .row-3 div{
display: flex;
align-items: center;
}
.Add-user-content-container .row-3 div a{
color:#438AFE;
margin-left: 10px;
font-weight: normal;
font-size: 13px;
letter-spacing: 0px;
overflow-y: auto;
}
.Add-user-content-container .row-6{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0px;
margin-top: 10px;
}
.user-error-msg{
color: #890804;
font-weight: bold;
margin-left: 5px;
}
.Add-user-content-container .link-container{
margin-top: 15px;
}
.Add-user-content-container .row-3,.Add-user-content-container .row-4,.Add-user-content-container .row-5,.Add-user-content-container .row-2{
flex-direction: column;
margin-top: 10px;
}
.Add-user-content-container .user-list-row{
cursor: pointer;
margin: 1px;
padding: 3px;
width:95%;
min-height: 23px;
}
.selected-mobile-group{
background-color: #707070;
color: white;
}
.group-management-container{
display: flex;
flex-direction: column;
margin-top: 10px;
}
.group-management-title{
font-weight: bold;
margin-bottom: 10px;
}
.group-management-card-container{
margin-top: 10px;
align-items: center;
width: 95%;
}
.group-management-card-container .ccard{
display: flex;
flex-direction: column;
padding: 0px;
width: 45%;
height: 300px;
max-height: 250px;
border-radius: 7px;
}
.group-management-card-label{
display: flex;
justify-content: space-between;
background-color: #448CCB;
color: white;
padding: 10px
}
.group-management-card-label input[type="checkbox"]{
border:1px solid white;
background-color: #448CCB;
margin-left: 2px;
width: 15px;
height: 15px;
color: white;
font-size: 10px;
font-weight: normal;
}
.group-management-card-label input[type="checkbox"]:checked::after{
content: '\2713';
background-color: white;
color: #448CCB;
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.in-group-card-label input[type="checkbox"]{
background-color: black;
}
.in-group-card-label input[type="checkbox"]:checked::after{
color: black;
}
.grp-mng-checkbox-cntr{
display: flex;
align-items: center;
}
.in-group-card-label{
background-color: black;
}
.user-list-name{
width: 100%;
}
.group-management-card-container .user-list-option-container-list{
margin: 0px 10px;
}
.card-data{
display:flex;
flex-direction: column;
}
.card-search-container{
padding: 5px;
border-bottom: 1px solid #E8E7E7;
}
.card-search-container .card-search{
margin-left: 5px;
padding: 5px;
border: 1px solid #E8E7E7;
width: 90%;
}
.card-data{
max-height: 95%;
overflow: auto;
padding: 10px;
}
.Add-user-content-container .row-2 .role-container input {
margin-right: 10px;
border: 2px solid black;
}
.invalid-select-error{
border:2px solid #890804;
}
.invalid-radio-error{
color: #890804;
font-weight: bold;
}
.add-card-data-ctr{
max-height: 99%;
}
.Add-user-content-container .card-instruction{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.Add-user-content-container .card-instruction div{
display: flex;
flex-wrap: nowrap;
}
.Add-user-content-container .view-edit-role-ctr{
cursor: pointer;
margin-top: 15px;
}
.Add-user-content-container .view-edit-label{
color: #448CCB;
font-weight: bold;
}
.Add-user-content-container .users-role-container{
height: 125px;
}
.Add-user-content-container .users-role-container label{
max-height: 70px;
overflow: hidden;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
white-space: pre-line;
}
.invalid-label{
color: #890804;
}
.empty-div{
height: 38px;
}
.deviceBased{
display: flex;
flex-direction: row;
width: 100%;
height: fit-content;
}
.deviceBased-ctr{
display: flex;
flex-direction: column;
}
.usename-div{
display: flex;
flex-direction: column;
margin-top: 10px;
}
.usernameResetPass{
display: flex;
flex-direction: column;
}
.resetPass{
display: flex;
flex-direction: column;
}
.credentialText{
top: 602px;
left: 461px;
width: 150px;
height: 18px;
font-family: SF Pro Display,sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
}
.usernameNdPassword{
background: #F5F5F5 0% 0% no-repeat padding-box;
border-radius: 6px;
opacity: 1;
width: 275px;
height: 35px;
padding: 8px;
padding-block: 15px;
margin-top: 10px;
border: none;
}
.password{
font-size: x-large;
}
.usernameDivNdPasswordDiv{
display: flex;
justify-content: center;
flex-direction: column;
}
.passwordDivNdSubmit{
margin-top: 10px;
width: 100%;
}
.resetPassText{
font-weight: normal !important;
width: fit-content;
margin-left: 9px;
display: flex;
align-items: center;
}
.resetPass{
margin-left: 40px;
margin-top: 6px;
}
.usernameNdReset{
display: flex;
flex-direction: row;
align-items: center;
}
.userSubmitButton{
float: right;
width: 20%;
margin-right: 40px;
}
.passWordField{
width: 35%;
}.emptydiv{
width: 43%;
}
.divAlign{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.buttonDiv{
margin-right: 40px;
align-self: flex-end;
}
.alignButton{
justify-content: flex-end;
display: flex;
height: fit-content;
}
.resetPassCheck{
width: 20px !important;
height: 20px !important;
}.errorMsg{
display: flex;
flex-direction: row;
}
.invalid-error-textBox{
border: 2px solid #890804;;
}
@media screen and (min-width: 1440px) {
.Add-user-content-container {
width: 90%;
margin: auto;
}
.Add-user-content-container .person-input-container .image-container {
height: 100%;
}
.user-image-view{
height: 75%;
width: 80%;
}
}
@media (max-width: 1024px){
.Add-user-content-container .card-instruction{
display: none;
}
.Add-user-content-container .row-6{
justify-content: flex-end;
}
}
@media (max-width: 1025px){
.add-sub-ctr-1 {
width: 70%;
}
.add-sub-ctr-2 {
width: 100%;
}
.group-management-card-container{
width: 90%;
margin: auto;
}
.add-user-inner-container{
flex-direction: column;
}
}
@media (max-width: 640px){
.add-sub-ctr-1{
width: 100%;
}
.group-management-card-container{
flex-direction: column;
}
.user-list-option-container-list svg{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
margin-bottom: 10px;
}
.group-management-card-container .ccard{
width: 100%;
}
.group-management-card-container .user-list-option-container-list{
flex-direction: row;
margin-top: 20px;
}
.Add-user-content-container .row-6{
flex-direction: column;
}
.deviceBased{
flex-direction: column;
}
.empty-div{
height: 10px;
}
.resetPass{
margin-left: unset;
}
.divAlign{
flex-direction: column;
}.buttonDiv{
flex-direction: row;
align-self: center;
margin-right:unset;
margin-top: 15px;
}.errorMsg{
flex-direction: column;
}.user-error-msg{
margin-top: 10px;
}
}
@media (max-width: 580px){
.Add-user-content-container {
width: 100%;
box-shadow: none;
padding:10px;
}
.name-input-container{
width: 100%;
}
.personal-details-input-container{
width: 100%;
}
.contact-input-container{
width: 100%;
}
.Add-user-content-container .person-input-container{
flex-direction: column;
}
.Add-user-content-container .person-input-container .image-container{
width: 45%;
align-items: center;
}
.Add-user-content-container input[type="image"]{
width: 90px;
height: 90px;
text-align: center;
}
.Add-user-content-container .row-2 .role-container{
align-items: center;
width: 90%;
margin: auto;
}
.Add-user-content-container .row-2 .role-container div{
justify-content: right;
}
}
@media (max-width: 340px){
.Add-user-content-container .row-2 .role-container{
width: 50%;
}
.Add-user-content-container .person-input-container .image-container{
width: 40%;
}
}
@media (max-width: 1024px){
.Add-user-content-container .card-data-list, .Add-user-content-container .filter-card-data-list{
display: none;
}
.Add-user-content-container .card-list-mobile, .Add-user-content-container .filter-list-mobile {
display: block;
}
}
.manage-role-title{
font-family: Open-Sans,sans-serif;
font-size: 14px;
letter-spacing: 1px;
font-weight: bold;
margin-bottom: 5px;
}
.manage-role-description{
color: #ACB1C0;
font-family: Open-Sans,sans-serif;
font-size: 13px;
margin-bottom: 10px;
}
.role-card-container{
display: flex;
justify-content: center;
font-family: Open-Sans,sans-serif;
}
.manage-role-cancel-btn, .manage-device-cancel-btn{
background-color: white;
color: black;
margin-right: 25px;
}
.role-card-container .icon{
cursor: pointer;
display: flex;
justify-content: center;
}
.role-list-unselected-container-list, .role-list-selected-container-list{
width: 45%;
}
@media (max-width: 640px){
.role-card-container{
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.role-list-unselected-container-list, .role-list-selected-container-list{
width: 90%;
}
.role-card-container .icon{
flex-direction: row;
}
.role-card-container .icon svg {
transform: rotate(90deg);
margin-bottom: 10px;
cursor: pointer;
}
}
.user-profile-container{
box-shadow: 0px 10px 20px #00000034;
padding:20px;
width: 45%;
display: flex;
flex-direction: column;
margin-top: 10px;
border-radius: 10px;
font-family: Open-Sans,sans-serif;
font-size: 14px;
}
.user-profile-section{
overflow: auto;
}
.change-pic-span{
font-weight: bold;
cursor: pointer;
}
.user-profile-title{
font-weight: bold;
margin-top: 10px;
font-size: 16px;
}
.user-profile-sub-ctr-1{
display: flex;
}
.user-profile-sub-ctr-1 .image-container{
display: flex;
flex-direction: column;
}
.user-profile-input-ctr{
width: 65%;
}
.user-profile-sub-ctr-2{
margin-top: 15px;
}
.user-profile-sub-ctr-1 .image-container img{
width: 80%;
height: 65%;
margin-bottom: 10px;
}
.profile-page-btn-ctr{
display: flex;
justify-content: flex-end;
}
.user-profile-sub-ctr-1 input{
margin-bottom: 0px;
margin-right: 0px;
font-family: inherit;
border-radius: 0px;
}
.inner-image-ctr{
position: relative;
width: 140px;
height: 170px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.inner-image-ctr .inner-x{
position: absolute;
font-size: 20px;
background-color: rgb(114, 114, 114);
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
right: 20px;
bottom: 45px;
color: white;
font-weight: normal;
border: 5px solid white;
}
.profile-role-ctr, .profile-advisor-ctr{
margin-bottom: 10px;
}
.profile-role-label, .profile-advisor-label, .reset-password-link-ctr{
font-weight: bold;
margin-bottom: 5px;
}
.profile-role-input,.profile-advisor-input{
margin-left: 10px;
}
.reset-password-link-ctr{
cursor: pointer;
color:#1e5fc7;
margin-top: 30px;
}
.profile-err-msg{
text-align: center;
}
.user-profile-sub-ctr-1 input{
font-size: 13px;
}
@media (min-width: 1440px){
.user-profile-container{
width: 35%;
}
}
@media (max-width: 960px){
.user-profile-container{
width: 55%;
}
}
@media (max-width: 640px){
.user-profile-container{
width: 85%;
}
}
@media (max-width: 480px){
.user-profile-container{
padding: 10px;
}
.user-profile-container{
width: 100%;
}
.user-profile-sub-ctr-1{
flex-direction: column;
}
.user-profile-sub-ctr-1 .image-container{
width: 100%;
}
.user-profile-input-ctr {
width: 100%;
margin-bottom: 10px;
}
.user-profile-input-ctr input{
margin-bottom: 5px;
}
}
.alert-setup-container{
font-family: Open-Sans,sans-serif;
font-size: 14px;
overflow: auto;
}
.alert-title{
font-weight: bold;
margin: 10px 0px;
}
.alert-configuration-ctr{
margin-left: 10px;
}
.alert-display-sort-ctr, .alert-display-radio-ctr{
display: flex;
align-items: flex-start;
}
.alert-display-radio-ctr{
margin-right: 20px;
}
.alert-display-radio-ctr input[type=radio]{
margin-left:5px;
border: 2px solid #1198ED;
background: #ffffff 0% 0% no-repeat padding-box;
width: 18px;
height: 18px;
}
.alert-display-radio-ctr input[type="radio"]::after{
border: 5px solid #1198ED;
}
.alert-display-radio-ctr input[type="radio"]:checked{
border: 5px solid #1198ED;
}
.alert-setup-container .alert-setup-btn-ctr{
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.alert-display-radio-ctr label{
cursor: pointer;
font-weight: bold;
letter-spacing: 1px;
font-size: 12px;
}
.alert-order-hint{
font-size: 12px;
color: #333333;
margin: 4px 0px;
}
.alert-sub-title{
font-size: 12px;
}
.toneLibTitle{
margin-left: 10px;
}
.defaultAlertToneContainer{
display: flex;
width: 50%;
flex-direction: column;
}
.toneLibrayContainer{
width: 40%;
}
.defaultAlertToneTitleAndText{
display: flex;
flex-direction: column;
font-family: Open-Sans,sans-serif;
font-size: 12px;
}
.alertToneTitle{
font-weight: bold;
margin-top: 10px;
font-family: Open-Sans, sans-serif;
font-size: 12px;
}
.toneDescription{
font-family: Open-Sans, sans-serif;
font-size: 12px;
width: 68%;
}
.alertToneText{
margin-top: 10px;
}
.audioCustomeContainer{
margin-top: 10px;
display: flex;
flex-direction: column;
font-family: Open-Sans,sans-serif;
font-size: 12px;
width: 100%;
}
.audioTableTitle{
display: flex;
flex-direction: row;
width: 100%;
height: 25px;
}
.audioTableCol1{
width: 20%;
display: flex;
flex-direction: row;
font-weight: bold;
align-items: center;
/* margin-right: 15px; */
}
.audioTableCol2{
margin-right: 10px;
display: flex;
align-items: center;
width: 30%;
}
.audioTableCol3{
width: 40%;
display: flex;
align-items: center;
}
.audioTableCol4{
width: fit-content;
display: flex;
flex-direction: row;
color: #448CCB;
align-items: center;
}
.audioTableCol4{
margin-left: 10px;
}
.audioTableCol4:hover{
cursor: pointer;
}
.generalAlertContainer, .musteringAlertContainer, .quickMessageContainer, .alarmClearedContainer, .clearAlertRemainderContainer{
margin-top: 5px;
display: flex;
flex-direction: row;
height: 50px;
width: 100%;
}
.question{
-webkit-text-fill-color: #FF0000;
margin-left: 7px;
}
.col2Container{
height: 30px;
width: 100%;
}
.upload-icon{
margin-left: 5px;
margin-right: 10px;
}
.upload-text{
font-family:Open-Sans,sans-serif;
font-size: 12px;
}
.modalAlign{
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: rgba(49,49,49,0.8);
display: flex;
align-items: center;
justify-content: center;
}
.preview-tone{
width: 100%;
border-style: solid;
border-radius: 20px;
border-width: thin;
box-shadow: 0px 5px 8px #00000029;
height: 40px;
}
.notifyOnServerDisconnectCont{
margin-top: 30px;
display: flex;
flex-direction: column;
font-family: Open-Sans,sans-serif;
font-size: 12px;
}
.enable-severDisNotify-checkbox-ctr{
font-family: Open-Sans,sans-serif ;
display: flex;
flex-direction: row;
}
.enable-severDisNotify-label{
cursor: pointer;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
}
.enable-severDisNotify-checkbox{
margin-left: 5px;
border: 2px solid black;
width: 30px;
height: 17px;
padding: 7px;
}
.alertType{
display: flex;
justify-content: center;
align-items: center;
}
.question{
display: flex;
justify-content: center;
align-items: center;
}
.enableServerDisNotifyDescription{
font-size: 12px;
margin-top: 7px;
}
.spanPreview{
display: none;
}
.serverUploadToneCtr{
display: flex;
flex-direction: column;
}
.spanToneLibrary{
display: none;
}
.remainder-interval-cont{
display: flex;
flex-direction: row;
margin-top:30px ;
font-family: Open-Sans,sans-serif;
font-size: 12px;
width: 100%;
}
.remainder-interval{
font-weight: bold;
margin-top: 10px;
}
.interval-cont{
display: flex;
flex-direction: row;
margin-top: 10px;
align-items: center;
}
.interval-show-cont{
cursor: not-allowed;
opacity: 0.5;
}
.interval-input{
width: 80px;
height: 30px;
border-radius: 3px;
margin-left: 6px;
margin-right: 6px;
box-shadow: 0px 5px 8px #00000029;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #333333;
}
.remainder-interval-cont input[type="checkbox"]{
border: 2px solid #448CCB;
width: 20px;
height: 20px;
}
.notifyOnServerDisconnectCont input[type="checkbox"]{
border: 2px solid #448CCB;
width: 20px;
height: 20px;
}
.remainder-interval-cont input[type="checkbox"]:checked{
background-color: #448CCB;
color: white;
}
.notifyOnServerDisconnectCont input[type="checkbox"]:checked{
background-color: #448CCB;
color: white;
}
.escalationColorsCont{
margin-top: 30px;
display: flex;
flex-direction: column;
font-family: Open-Sans,sans-serif;
font-size: 12px;
}
.escalationTitle{
font-weight: bold;
}
.escalationContent{
display: flex;
flex-direction: row;
margin-top: 20px;
}
.escaltionRightSide{
display: flex;
flex-direction: row;
margin-left: 40px;
}
.after{
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.interval-input-escalation{
width: 50px;
height: 30px;
box-shadow: 0px 5px 8px #00000029;
border: 1px solid #333333;
border-radius: 4px;
padding-left: 10px;
padding-right: 10px;
}
.escaltionLeftSide{
display: flex;
flex-direction: row;
}.escaltionRightSide{
display: flex;
justify-content: center;
align-items: center;
}
.useColor{
margin-right: 15px;
}
.minutes-escalation{
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.alertRemainderIntervalCont, .clearRemainderIntervalCont, .checkinRemainderIntervalCont{
width: 33%;
}
.add-level-button{
background-color: #304455;
font-size: 13px;
border-radius: 5px;
margin-left: 5px;
margin-bottom: 0px;
width: 110px;
height: 50px;
-webkit-text-fill-color: white;
font-family: Open-Sans,sans-serif;
margin-top: 20px;
}
.iconDiv{
margin-left: 20px;
}
.iconDiv:hover{
cursor: pointer;
}
.tooltip-container {
position: relative;
}
.custom-tooltip {
visibility: hidden;
width: 180px;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
border-radius: 5px;
position: absolute;
z-index: 1;
bottom: 111%; /* Position above the element */
left: 10px;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-family: Open-Sans,sans-serif;
font-size: 12px;
}
.custom-tooltip::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip-container:hover .custom-tooltip {
visibility: visible;
opacity: 1;
}
.tooltip-container:hover {
cursor: pointer;
}
.toneContainer{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.toneLibrary{
margin-left: 10px;
display: flex;
flex-direction: row;
margin-top: 7px;
align-items: flex-start;
}
.cont{
width: 200px;
}
@media screen and (min-width: 800px) and (max-width: 1400px) {
.defaultAlertToneContainer{
width: 55%;
}
.toneLibrayContainer{
width: 45%;
}
}
@media screen and (min-width: 300px) and (max-width: 800px) {
.toneContainer{
flex-direction: column;
}
.defaultAlertToneContainer{
width: 100%;
}
.toneLibrayContainer{
width: 100%;
}
}
@media screen and (max-width: 800px) {
.generalAlertContainer, .musteringAlertContainer, .quickMessageContainer, .alarmClearedContainer, .clearAlertRemainderContainer{
flex-direction: column;
width: 100%;
height: unset;
margin-top: 20px;
}
.toneLibTitle{
margin-left: 0px;
margin-top: 20px!important;
}
.toneLibrary{
margin-left: 0px;
margin-bottom: 5px;
width: 100%;
}
.toneDescription{
width: 52%;
}
.serverNotify{
margin-top: 1px !important;
}
.audioTableTitle{
display: none;
}
.spanToneLibrary, .spanPreview{
display: block;
width: 20%;
}
.audioTableCol1, .audioTableCol2, .audioTableCol3, .audioTableCol4{
width: 100%;
margin-top: 10px;
}
.uploadToneBtn{
width: 48% !important;
}
.col2Container{
display: flex;
flex-direction: row;
width: 100%;
}
.audioTableCol3{
height: unset;
}
.preview-tone{
height: 40px;
max-width: 250px;
}
.cont{
height: 30px;
max-width: 250px;
}
.dropDownContainer{
height: -webkit-fill-available;
}
.audioTableCol4{
margin-left: 0px;
}
.remainder-interval-cont{
flex-direction: column;
width: 100%;
margin-top: 7px !important;
}
.alertRemainderIntervalCont, .clearRemainderIntervalCont, .checkinRemainderIntervalCont{
margin-top: 23px;
}
.audioCustomeContainer{
margin-top: unset;
}
.alertRemainderIntervalCont, .clearRemainderIntervalCont, .checkinRemainderIntervalCont{
width: 100%;
}
.tone-lib-height{
height: 130px;
}
.custom-tooltip {
bottom: 117%;
}
}
.dropDownContainer{
width: 100%;
flex-direction: row;
display: flex;
border: 1px solid #333333;
border-radius: 4px;
background: #FFFFFF;
justify-content: center;
box-shadow: 0px 5px 8px #00000029;
align-items: center;
}
.dropDownContainer:hover{
cursor: pointer;
}
.drop-down-arrow-tones{
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.drop-down-arrow-rotation{
width:70%;
transform: rotate(180deg);
}
.drop-down-arrow-tones img{
height: unset;
width: unset;
}
.selectedToneTitle{
width: 70%;
font-size: 14px;
margin-left: 7px;
margin-right: 7px;
padding: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-content-tones{
max-height: 250px;
overflow-y: auto;
z-index: 1;
position: absolute;
background: #fff;
box-shadow: 3px 3px 10px 6px rgba(0,0,0,0.06);
color: #333;
width: 100%;
border-radius: 5px;
font: normal normal medium 15px/28px SF Pro Display;
}
.tone-items{
padding: 5px;
cursor: pointer;
transition: all 0.2s;
display: flex;
height: 100%;
}
.tone-items:hover{
background: #E8E7E7;
}
.dropDownButton{
display: flex;
width: 100%;
}
.cont{
width: 100%;
position: relative;
height: 100%;
}
@media (max-width:580px) {
.dropDownContainer{
height: 30px;
}
}
.popUpContainer {
z-index: 99;
width: 60%;
height: auto;
max-height: 95%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.index-change {
z-index: 6 !important;
}
.form-audio {
height: 100%;
}
.form-audio > .add-new-icon-model-title {
height: 8%;
}
.form-audio > .file-adding-container {
height: 25%;
}
.form-audio > .supportedFileText {
height: 15%;
}
.form-audio > .selected-tone {
height: 15%;
}
.form-audio > .add-icon-error-msg {
height: 8%;
}
.error-input {
border-bottom: 2px solid #890804;
}
.add-new-audio-model {
width: 75%;
height: 100%;
}
.title-cont-second > .no-file-option {
margin-top: 3.5% !important;
}
.upload-modal-container {
background: #ffffff;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.supportedFileText {
font-family: Open-Sans, sans-serif;
font-size: 13px;
display: flex;
justify-content: flex-end;
margin-top: 10px;
margin-right: 5px;
color: #555555;
flex-direction: column;
width: 43%;
}
.supportedFileText div {
color: #000000 !important;
}
.previewAndFormat{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.tone-file-input::placeholder {
color: #606060;
}
.selected-tone {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
height: 40px;
width: 52%;
}
.tone-label {
color: #606060;
font-weight: bold;
}
.audio-popup-cont {
width: 100%;
}
.title-cont {
display: flex;
flex-direction: row;
}
.audio-choose-position {
margin-top: 10px;
margin-left: 20px;
}
.toneName-input {
width: 70% !important;
margin-top: 2%;
}
.tone-file-input {
width: 50% !important;
margin-left: 1% !important;
color: #606060;
font-family: Open-Sans, sans-serif;
font-size: 14px;
}
.title-cont-second {
margin-top: 3%;
}
.errorMessageDiv{
height: 50px;
align-items: end;
display: flex;
}
.borderChange {
border-style: unset !important;
}
@media(min-width: 1440px) {
.popUpContainer {
width: 50%;
}
}
@media screen and (min-width: 250px) and (max-width: 900px) {
.popUpContainer {
height: auto;
width: 100%;
}
}
@media screen and (min-width: 200px) and (max-width: 550px) {
.title-cont-device{
flex-direction: column;
}
.toneName-input{
width: 100% !important;
}
}
@media screen and (min-width: 200px) and (max-width: 500px) {
.previewAndFormat {
flex-direction: column;
margin-left: 9px;
}
.supportedFileText{
width: 80%;
}
.selected-tone {
width: 100%;
}
.selected-tone{
order: 2;
justify-content: flex-start;
}
}
.deployment-configuration-ctr{
overflow: auto;
}
.deployment-setup-ctr{
font-family: Open-Sans,sans-serif;
}
.deployement-setup-configuration-ctr{
padding-left: 10px;
}
.disableUsernameEdit{
-webkit-text-fill-color: black;
}
.disableUsernameEdit:hover{
cursor: not-allowed;
}
.disablingEditConfig:hover{
cursor: not-allowed;
}
.highlighting{
color: #890804;
}
.error-ctr{
display: flex;
justify-content: center;
align-items: center;
margin-top: 15px;
color: #890804;
font-size: 12px;
font-weight: bold;
height: 15px;
}
.diablingCtr{
opacity: 0.5;
}
.diablingCtr:hover{
cursor: text !important;
}
.border-color-error{
border: 2px solid #890804 !important;
}
.input-error-border input[type="number"]{
border: 2px solid #890804 !important;
}
.deployement-setup-configuration-title{
font-size: 14px;
font-weight: bold;
margin: 10px 0px;
letter-spacing: 0.5px;
}
.manage-config-btn-ctr{
display: flex;
width: 100%;
justify-content: center;
height: 41px;
}
.manage-config-cancel-btn{
background-color: white;
color: black;
margin-right: 25px;
width: auto;
font-size: 13px;
font-family: Open-Sans,sans-serif;
border-radius: 6px;
padding: 10px;
border: none;
cursor: pointer;
margin-top: 10px;
justify-content: center;
display: flex;
align-items: center;
}
.goToDeviceLink{
color: #448CCB;
}
.goToDeviceLink:hover{
cursor: pointer;
}
.deployment-checkbox-ctr{
display: flex;
align-items: center;
font-size: 12px;
font-weight: bold;
}
.deployment-checkbox-ctr span{
margin: 5px 5px 5px 0px;
letter-spacing: 0.5px;
}
.deployment-checkbox-ctr input[type="checkbox"]{
width: 19px;
height: 19px;
border: 2px solid #448CCB;
}
.deployment-checkbox-ctr input[type="checkbox"]:checked::after{
content: '\2713';
font-weight: bold;
background-color: #448CCB;
color: white;
width: inherit;
height: inherit;
padding-left: 2px
}
.deployment-config-description{
font-size: 12px;
color: #333333;
margin: 10px 0px;
}
.deployment-input-ctr{
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.deployment-input-ctr input{
background-color: white;
padding-left: 8px;
padding-right: 8px;
}
.device-based-alerting-ctr{
margin-top: 19px;
}
.mobile-inactivity-ctr{
margin-top: 13px;
}
.mobile-inactivity-charging-ctr{
margin-top: 13px;
}
.deployment-input-ctr label, .deployment-input-ctr span{
font-size: 14px;
letter-spacing: 0.5px;
font-weight: bold;
}
.device-based-alerting-input-ctr{
display: flex;
}
.mobile-inactivity-ctr input{
width: 70px;
}
.mobile-inactivity-ctr .tool-tip-text{
font-size: 12px;
color: #333333;
font-weight: normal;
}
div.absolute {
bottom: 10px;
margin-top: 15px;
}
.inactive-input-ctr span{
font-size: 12px;
letter-spacing: 0.5px;
font-weight: bold;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.display-column {
display: flex;
flex-wrap: wrap;
}
.device-page {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
font-family: Open-Sans, sans-serif;
}
.status-tab-container p:hover{
cursor: pointer;
}
.addDevice-content {
height: auto;
}
.upload-file-icon-div {
width: 18%;
margin: 6px;
display: flex;
align-items: center;
}
.device-selection-text-container {
margin-top: 12px;
display: flex;
flex-direction: row;
font-size: 14px;
width: 100%;
padding-top: 8px;
font-family: "Open-Sans";
}
.option-title {
padding-right: 20px;
font-weight: bold;
}
.rowDivSearch{
width: 25%;
margin-right: 6px;
display: flex;
flex-direction: row;
}
.device-status-search-container {
display: flex;
flex-direction: row;
align-items: center;
font-family: Open-Sans, sans-serif;
width: 100%;
margin-top: 15px;
justify-content: space-between;
}
.searchReset{
justify-content: center;
align-items: center;
padding-bottom: unset;
}
.status-tab-container
{
width: 55%;
display: flex;
flex-direction: row;
font-size: 14px;
}
.device-page-search-container{
width:100%;
display: flex;
}
.device-search {
margin-left: 2%;
margin-top: 1%;
width: 88%;
height: 26px;
border: 1px solid #a3a0a0;
border-radius: 7px;
padding: 5px;
font-family: inherit;
border-width: 2px;
}
.vertical-line-status-tab {
border-left: 1px solid #7c7a7a38;
height: 22px;
margin-left: 22px;
margin-right: 22px;
}
@media (min-width: 1240px) and (max-width: 1340px) {
.status-tab-container {
width: 75%;
}
.rowDivSearch{
width: 25%;
}
}
@media (min-width: 1025px) and (max-width: 1240px) {
.status-tab-container {
width: 75%;
}
.rowDivSearch{
width: 35%;
}
}
@media (max-width: 960px) {
.col-33 {
width: 40%;
}
.vertical-line {
width: 11px;
}
.device-status-search-container {
flex-direction: column;
align-items: unset;
width: 100%;
}
.device-selection-text-container {
flex-direction: column;
}
.rowDivSearch{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
width: 60%;
}.searchReset{
align-items: center;
display: flex;
}
.filter-text {
margin-top: 10px;
}
.status-tab-container {
width: 100%;
}
.col-33 {
width: 50%;
}
}
@media (max-width: 640px) {
.col-33 {
width: 44%;
}
.vertical-line {
width: 16px;
}
.vertical-line-status-tab{
margin-left: 10px;
margin-right: 10px;
}
.device-status-search-container {
flex-direction: column;
align-items: unset;
width: 100%;
}
.device-selection-text-container {
flex-direction: column;
}
.filter-text {
margin-top: 10px;
}
.status-tab-container {
width: 100%;
}
.col-33 {
margin-top: 10px;
width: 80%;
}
.status-tab-container{
flex-flow: wrap;
}
}
@media (max-width: 480px) {
.vertical-line-status-tab{
margin-left: 5px;
margin-right: 5px;
}
.col-33 {
width: 60%;
}
.vertical-line {
width: 11px;
}
.device-status-search-container {
flex-direction: column;
align-items: unset;
width: 100%;
}
.status-tab-container {
width: 100%;
}
.col-33 {
margin-top: 10px;
width: 100%;
}
}
@media (max-width: 340px) {
.vertical-line-status-tab{
margin-left: 2px;
margin-right: 2px;
}
.device-status-search-container {
flex-direction: column;
align-items: unset;
width: 100%;
}
.status-tab-container {
width: 100%;
font-size: 12px;
}
.col-33 {
margin-top: 10px;
width: 100%;
}
.vertical-line-status-tab {
margin-left: 5px;
margin-right: 5px;
}
.rowDivSearch{
width: 100%;
}
.rowDivSearch{
width: 100%;
}
}
.manage-device-modal-content{
font-family: Poppins-regular, sans-serif;
}
.manage-device-modal-inner-content{
display: flex;
}
.manage-device-details-ctr{
width: 30%;
}
.manage-device-allocation-ctr{
width: 70%;
}
.manage-device-details-title, .device-allocation-title{
font-weight: bold;
font-size: 14px;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.highLight{
color: #890804;
}
.highLight-input{
border: 2px solid #890804;
}
.detach-ctr input{
cursor: not-allowed;
}
.device-error-msg{
margin-top: 10px;
font-size: 14px;
color: #890804;
font-weight: bold;
}
.manage-device-details-title{
color: #448CCB;
font-size: 16px;
margin: 0px 0px 10px 0px;
}
.manage-device-details-ctr label{
font-size: 14px;
font-weight: bold;
}
.device-allocation-sub-title{
color: #707070;
font-size: 14px;
font-family: Open-Sans,sans-serif;
margin-bottom: 10px;
}
.manage-device-details-ctr input[type="text"]{
margin: 5px 0px 15px 0px;
width: 90%;
padding-left: 8px;
padding-right: 8px;
}
.detach-ctr{
display: flex;
align-items: center;
font-size: 14px;
margin-top: 10px;
font-weight: bold;
}
.detach-ctr input{
width: 17px;
height: 17px;
margin-right: 5px;
}
.detach-ctr span{
margin-right: 10px;
}
.manage-device-detach-btn{
color: #448CCB;
padding-left: 10px;
border-left: 1px solid #707070;
}
.manage-device-detach-btn:hover{
cursor: pointer;
}
.detch-blocked{
color: #448CCB;
padding-left: 10px;
border-left: 1px solid #707070;
opacity: 0.5;
}
.detch-blocked:hover{
cursor: not-allowed;
}
.manage-device-btn-ctr{
display: flex;
width: 100%;
justify-content: center;
}
.alarm-card-container{
display: flex;
margin-bottom: 20px;
}
.alarm-card-container .icon{
cursor: pointer;
display: flex;
justify-content: center;
}
.alarm-list-unselected-container-list, .alarm-list-selected-container-list{
width: 45%;
}
.manage-device-modal{
width: 80%;
}
@media (max-width: 1025px){
.manage-device-modal{
width: 85%;
}
}
@media (max-width: 960px){
.manage-device-modal{
width: 90%;
}
}
@media (max-width: 640px){
.manage-device-modal-inner-content{
flex-direction: column;
}
.manage-device-details-ctr, .manage-device-allocation-ctr{
width: 95%;
margin-bottom: 20px;
}
.alarm-card-container{
flex-direction: column;
}
.manage-device-allocation-ctr .icon{
flex-direction: row;
}
.manage-device-allocation-ctr .icon svg{
transform: rotate(90deg);
margin-bottom: 10px;
cursor: pointer;
}
}
@media (max-width: 480px){
}
.manage-device-detail-modal{
width: 80%;
padding:35px;
height: auto;
}
.title-div{
color: #448CCB;
font-size: 16px;
font-family: Poppins-bold;
text-align: center;
}
.header-ctr{
display: flex;
flex-direction: row;
margin-top: 20px;
color: #333333;
width: 100%;
font-size: 14px;
font-family: Poppins-regular;
flex-flow: wrap;
justify-content: space-between;
}
.overFlow{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: fit-content;
}
.id-div{
min-width: 70px;
font-weight: bold;
}
.name-div{
min-width: 100px;
font-weight: bold;
}
.version-div{
min-width: 130px;
font-weight: bold;
}
.battery-div{
min-width: 95px;
font-weight: bold;
}
.type-div{
min-width: 90px;
font-weight: bold;
margin-right: 3px;
}
.device-model-icon-apple{
margin-right: 5px;
height: 16px;
}
.device-model-icon-android{
height: 15px;
margin-right: 6px;
}
.col1{
width: fit-content;
margin-right: 16px;
display: flex;
flex-direction: row;
}
.column{
display: flex;
flex-direction: row;
}
.col2{
width: fit-content;
margin-right: 16px;
display: flex;
flex-direction: row;
}
.col3{
width: fit-content;
margin-right: 16px;
display: flex;
flex-direction: row;
}
.col4{
width: fit-content;
margin-right: 16px;
display: flex;
flex-direction: row;
}
.col5{
width: fit-content;
display: flex;
flex-direction: row;
}
.battery{
width: 35px;
}
.user-and-device{
display: flex;
flex-direction: row;
font-family: Poppins-regular;
font-size: 14px;
width: 100%;
margin-top: 20px;
}
.green{
background-color: #06BC37 !important
}
.dot {
height: 12px;
width: 12px;
background-color: #FF0902;
border-radius: 50%;
display: inline-block;
margin-top: 4px;
margin-right: 5px;
}
.user-div{
width: 50%;
display: flex;
flex-direction: column;
}
.device-div{
width: 50%;
display: flex;
flex-direction: column;
}
.communication-status{
font-family: Poppins-regular;
font-size: 14px;
margin-top: 25px;
width: 100%;
display: flex;
flex-direction: column;
}
.label{
width: fit-content;
color:#333333;
opacity: 1;
font-weight: bold;
margin-right: 10px;
}
.footer-div{
display: flex;
width: 100%;
justify-content: center;
font-family: Poppins-regular;
font-size: 14px;
margin-top: 25px;
align-items: center;
}
.close-div{
color: black;
display: flex;
justify-content: center;
align-items: center;
margin-right: 25px;
}
.close-div:hover{
cursor: pointer;
}
.left-footer-div{
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.left-footer-div .cancel-button , .left-footer-div .save-button{
font-family: Poppins-regular !important;
}
.download-div{
display: flex;
flex-direction: row;
width: 21%;
justify-content: flex-end;
margin-right: 35px;
}
.download-div:hover{
cursor: pointer;
}
.icon-div{
width: 25px;
height: 40px;
margin-right: 5px
}
.requestLogs{
display: flex;
align-items: center;
justify-content: center;
}
.rowDiv{
display: flex;
flex-direction: row;
width: 130px;
}
.fetch-blocked{
background-color: #2e4254;
opacity: 0.5;
}
.req-blocked {
opacity: 0.5;
}
.fetch-blocked:hover{
cursor: not-allowed !important;
background-color: #2e4254;;
}
.leftDiv{
width: 25%;
}
.req-blocked:hover{
cursor: not-allowed !important;
}
@media (min-width: 1910px) {
.manage-device-detail-modal{
max-height: 90%;
height: fit-content;
}
}
@media (min-width: 1440px) and (max-width: 1910px) {
.manage-device-detail-modal{
height: fit-content;
max-height: 90%;
min-width: 80%;
width: fit-content;
}
}
@media (min-width: 1240px) and (max-width: 1440px) {
.manage-device-detail-modal{
height: fit-content;
max-height: 90%;
width: 90%;
}
}
@media (min-width: 1025px) and (max-width: 1240px) {
.manage-device-detail-modal{
height: fit-content;
width: 90%;
}
}
@media (min-width:950px) and (max-width: 1025px) {
.manage-device-detail-modal{
height: fit-content;
max-height: 90%;
width: 90%;
padding: 30px;
}
.communication-status{margin-top: 20px;}
.footer-div{
margin-top: 20px;
}
}
@media (min-width:800px) and (max-width: 950px) {
.manage-device-detail-modal{
max-height: 90%;
width: 96%;
padding: 30px;
height: fit-content;
}
.header-ctr , .user-and-device, .communication-status{
font-size: 13px;
}
}
@media (min-width: 500px) and (max-width: 800px) {
.manage-device-detail-modal{
height: 90%;
width: 90%;
}
.header-ctr{
justify-content: start;
}
.user-and-device{
flex-direction: column;
}
.device-div{
margin-top: 20px;
width: 100%;
}
.user-div{
width: 100%;
}
.download-div{
width: 40%;
}
}
@media (min-width: 300px) and (max-width: 500px) {
.header-ctr{
flex-direction: column;
}
.col1 , .col2 , .col3 , .col4 , .col5{
width: 274px;
}
.overFlow{
width: fit-content;
}
.id-div{
width: 72px;
}
.name-div{
width: 101px;
}
.user-and-device{
flex-direction: column;
}
.version-div{
width: 134px;
}
.device-div{
margin-top: 20px;
width: 100%;
}
.user-div{
width: 100%;
}.manage-device-detail-modal{
font-size: 6px;
height: 90%;
width: 95%;
}
.footer-div{
flex-direction: column;
align-items: center;
width: 100%;
}
.left-footer-div{
width: 100%;
justify-content: center;
}
.download-div{
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.column{
flex-direction: column;
}
}
.event-time-picker {
position: relative;
height: 30%;
}
.event-time-picker-input {
width: 87%;
padding-left: 2%;
border: 1px solid#B1B4AA;
border-radius: 4px;
height: 30px;
margin-left: 0% !important;
font-family: Open-Sans, sans-serif;
font-size: 14px;
cursor: pointer;
outline: none;
padding: 4%;
}
.event-time-picker ::-webkit-scrollbar {
display: none;
}
.time-picker-option {
height: 30px;
}
.event-time-picker-input option {
min-height: 50px !important;
overflow-y: visible;
}
.options {
position: absolute;
z-index: 2;
top: 100%;
left: 0;
width: 87%;
max-height: 200px;
overflow-y: scroll;
background-color: white;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.option {
font-family: Open-Sans, sans-serif;
font-size: 14px;
color: #333333;
margin: 3% 0% 3% 4%;
font-weight: normal;
}
.options :hover {
background-color: rgb(41, 138, 248);
}
.options :hover {
color: rgb(255, 255, 255);
}
.custom-dropdown {
position: relative;
max-height: 30px;
}
.event-time-picker input {
background-image: url(/assets/Time_Picker_Icon.svg),url(/assets/Drop_down_arrow.png);
background-repeat: no-repeat;
background-position: right 17px top 61%, right 6px top 48%;
color:black;
border-radius: 5px;
cursor: pointer;
background-size: 18px 20px, 8px 15px;
}
.event-time-picker-input::placeholder {
color: #707070;
font-weight: bold;
}
.error {
border: 1px solid #890804 !important;
}
@media (min-width: 481px)and (max-width :960px){
.event-time-picker input {
background-image: url(/assets/Drop_down_arrow.png);
background-position: right 1px top 48%;
background-size: 10px 15px, 5px 0px;
}
}
.className-title{
margin-right: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: -moz-fit-content;
max-width: 50%;
}
.back-to-classes button {
background-color: white;
white-space: nowrap;
cursor: pointer;
color: black;
border: none;
font-family: SF Pro Display, sans-serif;
font-size: 15px;
font-weight: bold;
display: flex;
align-items: center;
}
.button-arrange{
justify-content: space-between;
}
.classes-search-wrap{
width: 78%;
display: flex;
flex-direction: row;
align-items: center;
}
.classes-search-wrap > .col-33{
width: 28% !important;
}
.classes-filter-ctr{
padding: unset !important;
}
.classes-filter-ctr > .col-12 {
margin: unset;
margin-right: 10px;
}
.classes-filter-ctr > .col-12 > select {
margin-left: unset;
}
@media (min-width: 420px) and (max-width: 767px) {
.classes-search-wrap{
width: 50%;
}
.classes-search-wrap > .col-33{
width: 100% !important;
margin-top: 0px !important;
}
.classes-search-wrap > .group-reset-btn{
width: unset !important;
}
.classes-students-list-title{
justify-content: flex-start;
}
.className-title{
max-width: 100%;
}
}
@media (min-width: 220px) and (max-width: 420px) {
.classes-filter-ctr {
justify-content: flex-start !important;
}
.classes-search-wrap{
width: 100%;
}
.classes-search-wrap > .col-33{
width: 80% !important;
}
.classes-search-wrap > .group-reset-btn{
width: unset !important;
}
.classes-filter-ctr > .groups-select-filter-container{
width: 100% !important;
}
.classes-students-list-title{
justify-content: flex-start;
}
.back-to-classes{
width: 100%;
justify-content: flex-end;
display: flex;
margin-top: 5px;
}
.className-title{
max-width: 100%;
}
}
/* NavBar */
.side-navbar {
height: 100%;
padding: 8px;
background-color: black;
position: relative;
top: 0px;
z-index: 99;
width: 100%;
}
.side-navbar .logo-details {
display: flex;
}
.side-navbar .logo-details {
display: flex;
}
.side-navbar .logo-details img {
padding: 2%;
max-width: 95%;
}
.side-navbar .login-details {
color: #fff;
padding: 10px;
font-size: 13px;
font-weight: 800;
font-family: Open-Sans, sans-serif;
line-height: 25px;
}
.side-navbar .search-box {
display: flex;
padding: 10px 5px ;
}
.empty-icon-ctr{
display: flex;
width: 25px;
height: 25px;
margin-left: 5px;
}
.side-navbar .search-box input[type="text"] {
padding: 10px 18px;
font-size: 15px;
border: none;
border-radius: 5px;
color: #fff;
width: 100%;
background: url(/assets/navIcons_search.svg) no-repeat right 3% center;
background-size: 16px;
background-color: #304455;
font-family: Open-Sans,sans-serif;
}
.side-navbar .search-box img {
position: absolute;
font-size: 17px;
border: none;
cursor: pointer;
padding-left: 80%;
padding-top: 2%;
}
.nav-details{
height: 100%;
display: flex;
flex-direction: column;
}
.logo-details{
height: 15%;
}
.nav-links {
position: relative;
overflow-y: auto;
height: 57%;
padding-right: 10px;
}
.nav-bar-facility-name{
display: flex;
justify-content: space-between;
align-items: center;
}
.search-result-container{
padding: 10px;
height: 75%;
max-height: 75%;
overflow: auto;
width: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 999;
font-family: Open-Sans,sans-serif;
}
.no-scroll{
display: none;
}
.search-result-title{
display: flex;
color: #fff;
font-size: 14px;
justify-content: space-between;
}
.search-result-list{
display: flex;
flex-wrap: wrap;
}
.search-result{
background-color: #448CCB;
color: white;
font-size: 13px;
margin: 5px;
text-decoration: none;
padding: 2px 5px;
border-radius: 20px;
}
.no-menu-container{
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.no-menu-label{
font-size: 16px;
}
.no-menu-button{
border: none;
color: black;
text-align: center;
width: auto;
margin-top: 10px;
padding: 7px;
text-decoration: none;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}
.no-menu-text{
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
padding: 10px;
}
.sidebar-menu-item{
display: flex;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
color: #7c7a7a;
cursor: pointer;
}
.sidebar-menu-item-link{
display: flex;
text-decoration: none;
color: #7c7a7a;
width: 100%;
align-items: center;
}
.sidebar-sub-menu-item-link{
display: flex;
text-decoration: none;
color: #7c7a7a;
margin-left: 20%;
}
.sidebar-sub-menu-item-link.active{
color: #FFFFFF;
}
.sidebar-menu-item-link.active img{
filter: invert(20%) sepia(86%) saturate(2470%) hue-rotate(208deg) brightness(97%) contrast(104%);
}
.sidebar-menu-item-link.active{
color: #448CCB;
border-left: 3px solid #448CCB;
}
.sidebar-menu-item-link-icon {
width: 25px;
margin-left: 5px;
}
.sidebar-menu-item-link .title{
display: flex;
font-family: Open-Sans,sans-serif;
padding-left: 5%;
width: 70%;
font-size: 16px;
}
.sidebar-sub-menu-item-link .submenu-title{
display: flex;
font-family: Open-Sans,sans-serif;
font-size: 14px;
margin: 3px 0px;
}
.side-navbar .nav-links .div {
display: flex;
flex-direction: row;
padding-top:15px;
padding-right: 15px;
padding-bottom: 15px;
}
.sidebar-menu-item-link .nav-menu-icon{
transform: rotate(180deg);
}
.sidebar-menu-item-link.active-menu .nav-menu-icon{
transform: rotate(0deg);
}
.side-navbar ul > li img {
width: 10%;
height: 20%;
margin-left: 5%;
}
.side-navbar ul > li span{
height:auto;
}
.side-navbar ul > li .title {
display: flex;
font-family: Poppins;
font-weight: bolder;
padding-left: 5%;
font-size: 14px;
}
ul > li a{
color: #7c7a7a;
}
.side-navbar ul > li > ul > li span {
font-family: Poppins;
font-size: 12%;
padding-left: 13%;
}
.side-navbar ul > li span img {
width: 15px;
position: relative;
margin-left:60px;
transition: transform 0.4s;
}
.side-navbar ul ul .show {
position: static;
display: block;
}
.side-navbar ul > li > ul > li span {
font-size: 12px;
}
.showing {
display: block;
padding-left:25px;
margin-top:-10px;
}
.hiding {
display: none;
}
.menu-list{
height: 10%;
display: none;
}
.menu-list svg{
width: 25%;
}
.activeClass{
color:#448CCB;
}
.submenuActiveClass{
color: #FFFFFF;
}
.nested-menu-item{
margin-left: 20%;
}
.nested-menu-item .sidebar-sub-menu-item-link{
margin-left: 0px;
}
.nested-menu-item .title{
padding-left: 0px;
}
.facility-selection-popup-container {
width: 90%;
z-index: 2;
height: 50%;
overflow: auto;
position: absolute;
box-sizing: border-box;
}
.facility-selection-popup {
width: 100%;
padding: 5px;
user-select: none;
border-radius: 5px;
background-color: #fff;
}
.facility-selection-popup-item{
padding: 5px;
display: flex;
color: black;
font-size: 15px;
cursor: pointer;
border-radius: 5px;
background: white;
align-items: center;
justify-content: space-between;
}
.facility-selection-popup-item.selected {
border: 1px solid black;
}
.facility-selection-popup-item:hover {
background: #e9e7e7;
}
.facility-selection-popup-logo {
height: 50px;
width: 50px;
}
.sub-nav-menu{
padding: 3px 0px;
padding-left: 20%;
font-size: 14px;
padding-right: 14px;
}
.sidebar-menu-item-link .submenu-title{
padding-left: 0px;
}
.sidebar-menu-item-link .submenu-nav-title{
padding-left: 0px;
font-size: 14px;
}
.submenu-nav-sub-title{
padding-left: 10%;
}
.name-arrow-nav-ctr{
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.nav-bar-ctr {
height: 100%;
}
@media (max-width:380px) {
.sidebar-menu-item-link-icon{
height: 20px;
}
}
@media screen and (max-width:600px) {
.nav-links li span{
margin-top:-5px;
}
}
.nav-links .vertical {
border-left: 3px solid #448CCB;
height: 25px;
}
@media screen and (min-width: 1440px) {
.nav-container {
width: 16%;
}
.side-navbar {
width: 100%;
}
.right-container {
width: 100%;
}
.logo-details {
height: 13%;
}
}
@media only screen and (max-width: 1025px) {
.menu-list{
display: block;
}
.shows {
-webkit-transition: 0.5s ease 0s;
}
.nav-bar-ctr{
width: 100%;
height: 100%;
background-color: transparent;
position: absolute;
top: 0px;
z-index: 99;
}
.hides {
height: 0px;
padding: 0;
}
.show {
display: block;
}
.nav-details.show {
display: flex;
}
.nav-details {
height: 90%;
}
.hide {
display: none;
}
.side-navbar .nav-links {
padding-top: 0%;
}
.side-navbar .nav-links li {
margin:5% 5% 5% 0%;
list-style: none;
}
.side-navbar ul > li span{
white-space: nowrap;
}
.side-navbar .login-details {
padding: 5px;
}
.side-navbar input[type="text"] {
padding: 10px 12px;
font-size: 13px;
}
.side-navbar input[type="text"] {
padding: 10px 15px;
font-size: 10px;
}
.side-navbar .search-box img {
display: none;
}
.downIcon {
display: none;
}
.side-navbar .search-box img {
display: none;
}
.side-navbar ul > li > ul > li span {
font-family: Poppins;
}
.side-navbar{
width: 50%;
padding-top: 0px;
margin-top: 0;
}
.nav-container{
width: 0%;
position: unset;
}
.right-container{
width: 100%;
}
}
@media only screen and (max-width: 768px){
.side-navbar{
width: 80%;
}
}
@media only screen and (min-width: 320px) and (max-width: 1125px) {
.nav-links{
height: 50%;
}
}
@media only screen and (min-width: 1440px) {
.side-navbar {
height: 100%;
}
}