@import url('https://fonts.cdnfonts.com/css/texta');
:root{
    --blue: #3480FC;
    --light-grey-2: #BFBFBF;
    --secondary-accent: #E2EDFF;
    --secondary-accent-b9d4ff: #B9D4FF;
    --orange: #FF9931;
    --green: #5AC35A;
    ---000000: #000000;
    --light-grey-1: #EFEFEF;
    --primary: #FFD307;
    --red: #F45A49;
    --white: #FFFFFF;
    --secondary: #002C73;

    /* Font/text values */
    --font-family-texta: Texta;
    --font-style-normal: normal;
    --font-weight-900: 900px;
    --font-weight-bold: bold;
    --font-weight-medium: medium;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-26: 26px;
    --font-size-34: 34px;
    --character-spacing-0: 0px;
    --line-spacing-23: 23px;
    --line-spacing-25: 25px;
    --line-spacing-28: 28px;
    --line-spacing-31: 31px;
    --line-spacing-48: 48px;
    }

/* Character Styles */
.headline-—-18pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-18);
line-height: var(--line-spacing-25);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.title-2-—-26pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-900);
font-size: var(--font-size-26);
line-height: var(--line-spacing-31);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.header-—-34pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-900);
font-size: var(--font-size-34);
line-height: var(--line-spacing-48);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.headlines-2-18pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-900);
font-size: var(--font-size-18);
line-height: var(--line-spacing-25);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.body-—-16pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-16);
line-height: var(--line-spacing-23);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.title-1-—-26pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-26);
line-height: var(--line-spacing-31);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.title-3-—-20pt {
font-family: var(--font-family-texta);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-20);
line-height: var(--line-spacing-28);
letter-spacing: var(--character-spacing-0);
color: var(---000000);
}
.form-control:focus{
    background-color:transparent!important;
    border-color: transparent!important;
    box-shadow: 0 0 0 0.2rem rgb(201 165 8 / 9%)!important ;
}

.row{
    margin: 0;
    padding: 0;
}
a{
    color: #000000;
}
a:hover{
    text-decoration: none;
    color: #eec304;
}

ul{
    list-style-type: none;
}
/* colors */


.login-bg{
    background-image: url('../img/background/bg1.png');
    background-size: cover;
}

.context{
    background: var(--secondary);
    width: 221px;
    height: 70px;
    border-radius: 8px;
    color: white;
    padding: 20px;
    justify-content: center;
}
.dflex{
    display: flex;
}
.b-logo{
    width: 94px;
    height: 22px;
    margin-top: 3px;
   
}
.border-right{
    border-right: 20px white solid;
}

.login-card{

    width: 438px;
    height: 281px;
    background: var(--white) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 15px #00000029;
    border-radius: 8px;
}
.wrapper-center{
    /* background: red; */
    justify-content: center;
    display: flex;
    align-items: center;
}

.logo-container{
    margin-top: 108px;
    margin-bottom: 66px;
    margin-left: 39%;
}
.form-container{
    margin-left: 29%;
}

.h3-title{
    font-family: 'Texta', sans-serif;
    font:   var(--unnamed-font-weight-900)
    var(--unnamed-font-size-26)/var(--unnamed-line-spacing-31);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---000000);
    text-align: left;
    font: normal normal 900 26px/31px Texta;
    letter-spacing: 0px;
    color: #000000;
}

.input-btn{
    margin-top: 14px;
    height: 42px;
    background: var(--primary) 0% 0% no-repeat padding-box;
    background: #FFD307 0% 0% no-repeat padding-box;
    border-radius: 10px;
    /* opacity: 1; */
    box-shadow: 0px;
    border: transparent !important;
    font-weight: 600;
}

.close-btn{
    margin-top: 14px;
    height: 42px;
    background: var(--primary) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 10px;
    /* opacity: 0; */
    box-shadow: 0px;
    border: transparent !important;
    font-weight: 600;
}

.close-btn:hover{
    background: #918f8a 0% 0% no-repeat padding-box;
}


.form-control{
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
}
.input-btn:hover{
    background: #eec304 0% 0% no-repeat padding-box;
}
.font-arrow{
    font-size: 20px;
    font-weight: 400;
}
.fa {
    -webkit-text-stroke: 2px white;
}
.password-card{

    width: 438px;
    height: 321px;
    background: var(--white) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 15px #00000029;
    border-radius: 8px;
}
.debug{
    border: solid 2px red;
}
/* dashboard css */
.bg-primary-custom{
    background-color: var(--secondary);
}

.header-logo{
    width: 129px;
    height: 26px;
}
.header-profile-picture{
    width: 25px;
    height: 25px;
    border-radius: 20px;
}

/* dashboard main */
.btn-custom-download{
    background: var(--secondary) 0% 0% no-repeat padding-box;
    background: #002C73 0% 0% no-repeat padding-box;
    border-radius: 16px;
    opacity: 1;
    color: white;
    width: 196px;
}
.main-select{
    border: none!important;
    background: transparent!important;
}
.month-box{
    background: #f4f4f6 0% 0% no-repeat padding-box;
    border-radius: 12px;
    padding: 10px;
    
}
.layout.fixed-header.fixed-sidebar .header {
    width: 60px!important;
}
.toogle-menu{
    padding-top: 14px;
    margin-right: 20px;
}

.dashboard-h4{
    color: #171717;
    font-weight: 600;
    font-size: 20px;

}
.dashboard-card{
    box-shadow: 0px 3px 15px #00000029;
    padding: 20px;
    margin: 1%;
    border-radius: 8px;
}
.dashboard-card-h5{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: black;
}
.dashboard-card-h3{
    color: #000000;
    font-size: 32px;
    font-weight: 700;

}
.dashboard-card-p{
    color: #8F92A1;
    font-size: 14px;
}
.dashboard-card-up{
    color: #00875A;
    font-weight: 500;
}
.dashboard-card-down    {
    color: #F45A49;
    font-weight: 500;
}

.modal-backdrop{
    opacity: 0!important;
    position: relative!important;
}

.table {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-collapse: collapse;
    border-spacing:0 10px;
    border: hidden;
    transition: 0.3s;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.table-responsive {
    max-height: 500px; /* Set a maximum height for the scrollable area */
    overflow-y: scroll; /* Enable vertical scrolling */
}

.thead {
    position: sticky;
    top: 0;
    z-index: 1; /* Ensure the header appears above content */
}

.container-default{
    padding-left: 120px;
    padding-right: 120px;
}


/* #staff */
.staff-filter{
    background: #E2EDFF;
    padding: 15px;
    border-radius: 8px;
}

.add-staff-btn{
    height: 42px;
    background: var(--primary) 0% 0% no-repeat padding-box;
    background: #FFD307 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    box-shadow: 0px;
    border: transparent!important;
    font-weight: 600;
}


.submitsearch, #submitsearch{
    border: 1px solid rgb(138, 134, 134);
    margin-left: -82px;
    padding: 5px;
    border-radius: 19px;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 8px; 
    padding-top: 4px;
  
    display: none;
    box-shadow: 0 0 1px black;     
    margin-right:110px;
  }
  
  #searchInput, #searchInput2, #searchInput3 {
        width: 45%;
        border: 1px solid #000;
        border-radius: 30px;
        font-size: 16px;
        background-color: white;
        background-image:url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-24.png');
  
        background-position: 10px 7px;
        background-repeat: no-repeat;
        padding: 8px 20px 8px 40px;
        -webkit-transition: width 0.8s ease-in-out;
        transition: width 0.8s ease-in-out;
        outline: none;
        opacity: 0.9;
  
}

.btn-outline-yellow{
    border: 1px solid yellow;
    color: var(--primary);
}
  
  
@keyframes ldio-o6s8i19ks7r {
   0% { transform: translate(12px,80px) scale(0); }
  25% { transform: translate(12px,80px) scale(0); }
  50% { transform: translate(12px,80px) scale(1); }
  75% { transform: translate(80px,80px) scale(1); }
 100% { transform: translate(148px,80px) scale(1); }
}
@keyframes ldio-o6s8i19ks7r-r {
   0% { transform: translate(148px,80px) scale(1): }
 100% { transform: translate(148px,80px) scale(0); }
}
@keyframes ldio-o6s8i19ks7r-c {
   0% { background: #ffd14f }
  25% { background: #ffd14f }
  50% { background: #2882fb }
  75% { background: #4ba761 }
 100% { background: #ffd14f }
}
.ldio-o6s8i19ks7r div {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(80px,80px) scale(1);
  background: #ffd14f;
  animation: ldio-o6s8i19ks7r 1s infinite cubic-bezier(0,0.5,0.5,1);
}
.ldio-o6s8i19ks7r div:nth-child(1) {
  background: #4ba761;
  transform: translate(148px,80px) scale(1);
  animation: ldio-o6s8i19ks7r-r 0.25s infinite cubic-bezier(0,0.5,0.5,1), ldio-o6s8i19ks7r-c 1s infinite step-start;
}.ldio-o6s8i19ks7r div:nth-child(2) {
  animation-delay: -0.25s;
  background: #ffd14f;
}.ldio-o6s8i19ks7r div:nth-child(3) {
  animation-delay: -0.5s;
  background: #4ba761;
}.ldio-o6s8i19ks7r div:nth-child(4) {
  animation-delay: -0.75s;
  background: #2882fb;
}.ldio-o6s8i19ks7r div:nth-child(5) {
  animation-delay: -1s;
  background: #ffd14f;
}
.loadingio-spinner-ellipsis-vntkk2cfqeq {
  width: 200px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  top: -38px;
  z-index: -999;
}
.ldio-o6s8i19ks7r {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-o6s8i19ks7r div { box-sizing: content-box; }

  
/* add staff */

.card-default{
    border: 1px solid #EFEFEF;
    border-radius: 8px;
}


.profile-pic {
    width: 200px;
    max-height: 200px;
    display: inline-block;
}

.file-upload {
    display: none;
}
.circle {
    border-radius: 100% !important;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    top: 72px;
}
img {
    /* max-width: 100%; */
    height: auto;
}

.p-image {
    position: relative;
    top: -39px;
    left: 81px;
    color: #666666;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-image:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.upload-button {
  font-size: 1.2em;
}

.upload-button:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  color: #999;
}
.small-12{
    position: relative;
    left: 36%;
}
.add-staff-control{
    height: 48px;
    border: 1px solid #BFBFBF;
    border-radius: 5px;
    box-shadow: 0px 3px 15px #0000000D;
}

.card-custom{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.tab-box.active{
    background: #E2EDFF!important;
    color: #000!important;
    font-weight: 600;
}

.title-software{
    color: #000!important;
    font-weight: 600;
}
.subtitle-software{
    color: #000!important;
    font-weight: 400;
}

.software-button{
    background: var(--primary) 0% 0% no-repeat padding-box;
    background: #FFD307 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
    border:solid #FFD307 1px;
}

.software-button:hover{
    background: var(--primary) 0% 0% no-repeat padding-box;
    background: #dfb704 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
    border:solid #dfb704 1px;
}

.software-border{
    background: #E2EDFF;
    border-radius: 8px;
    padding: 20px;
    
}

.software-table-title th, .software-p{
    font-size: 15px;
    font-weight: 300;
}

.software-store-image{
    width: 80px;
    height: 70px;
}

.software-table:first-child th{
    border-top: 0px!important;
}

.software-yellow{
    color: #ffd14f;
}

.software-badge{
    background: var(--light-grey-1) 0% 0% no-repeat padding-box;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    border-radius: 11px!important;
}
.software-active{

    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #00875A!important;
}

.software-inactive{
    background: #f8d9d0 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding:  5px;
    color: #DE350B!important;
}

.d-none{
    display: none!important;
}

.approveStore{
    height: 28px;
    /* UI Properties */
    background: var(--secondary) 0% 0% no-repeat padding-box;
    background: #002C73 0% 0% no-repeat padding-box;
    border-radius: 14px;
    opacity: 1;
}
.sclose{
    margin-left: 12px;
    width: 38px;
    height: 38px;
    /* UI Properties */
    background: var(--red) 0% 0% no-repeat padding-box;
    background: #F45A49 0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 50%;
    color: white;
}

.sdeny{
    width: 128px;
    height: 48px;
    /* UI Properties */
    background: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--red);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #F45A49;
    border-radius: 10px;
    opacity: 1;
    color: #F45A49;
}

.scard1{
    /* UI Properties */
    background: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--light-grey-1);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #EFEFEF;
    border-radius: 8px;
    opacity: 1;
}
.scard-p{
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 14px/20px var(--unnamed-font-family-texta);
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: center;
    font: normal normal bold 14px/20px;
    letter-spacing: 0px;
    color: #6C6C70;
    opacity: 1;
}
.sf600{
    font-size: 32px;
    font-weight: 600;
}

.appointment-cancelled{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #F45A49!important;
}

.appointment-confirmed{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #3480FC!important;
}

.appointment-completed{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #5AC35A!important;
}

.appointment-rejected{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #F45A49!important;
}

.appointment-requested{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #FFB800!important;
}
.light-grey-text{
    color: #BFBFBF;
}

.software-f26{
    font-size: 26px;
    
    margin-top: 10px;

}
.software-back-btn{
    background: #BFBFBF;
    padding: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    margin-right: 20px;
}
.software-arrow{
    
    position: relative;
    top: -1.3px;
    left: 3px;
}


/* #tabs */

.cycle-tab-container {
    margin: 30px auto;
    width: 100%;
    padding: 20px;
    box-shadow: 0 0 10px 2px #ddd;
  }
  
  .cycle-tab-container a {
    color: #173649;
    font-size: 16px;
    font-family: roboto;
  }
  

  
  .fade {
    opacity: 0;
    transition: opacity 4s ease-in-out;
  }
  
  .fade.active {
    opacity: 1;
  }
  
  .cycle-tab-item {
    width: 180px;
  }
  
  .cycle-tab-item:after {
    display:block;
    content: '';
    border-bottom: solid 3px orange;  
    transform: scaleX(0);  
    transition: transform 0ms ease-out;
  }
  .cycle-tab-item.active:after { 
    transform: scaleX(1);
    transform-origin:  0% 50%; 
    transition: transform 5000ms ease-in;
  }
  
  
  .nav-link:focus,
  .nav-link:hover,
  .cycle-tab-item.active a {
    border-color: transparent !important;
    color: orange;
  }

  /* //software page designs */
  .software-detail-image{
    width: 58px;
    height: 58px;
  }
  .software-detail-h4{
    font-size: 20px;
    font-weight:400;
  }
  .software-detail-p{
    font-size: 14px;
  }
  .lh-00{
    line-height: 6px;
    margin-left: 15px;
  }

  .software-detail-active{
    background-color: #e5f3ee;
    padding: 10px;
    border-radius: 10px;
    color: #00875A;
    font-weight: 500;
  }

  
  .software-detail-deactive{
    background-color: #f5a39a;
    padding: 10px;
    border-radius: 10px;
    color: #eb341f;
    font-weight: 500;
  }

  .software-detail-star{
    color: #FFD307;
    font-size: 26px;
  }

  .software-bold{
    font-weight: 600    ;
  }
  .software-faded-p{
    color: #BFBFBF;
  }

  .software-red{
    color: #eb341f!important;
    background-color: #F7F7F7;
    width: 144px;
    height: 38px;
    padding: 10px;
    border-radius: 6px;
  }

  .info-bold{
    font-size: 20px;
    font-weight: 600;
  }

  .pb-software-detail{
    margin-bottom: 90px!important;
  }
  .form-control-sd{
    height: 48px;
    background: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--light-grey-2);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 15px #0000000D;
    border: 1px solid #BFBFBF;
    border-radius: 5px;
    opacity: 1;
  }

  .card-sd{
    background: #F7F7F7;
    display: inline-block;
  }

  .software-detail-form-heading{
    font-size: 18px;
    font-weight: 600;

  }

  .software-detail-query-image{
    width: 84px;
    height: 94px;
    border-radius: 8px;
  }

  .software-detail-query-h4{
    color: var(---000000);
    text-align: left;
    font-size:18px;
    font-weight: 600;
    color: #000000;
  }

  .software-detail-query-p{
    
  }

.appointment-cancelled{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #F45A49!important;
}

.appointment-confirmed{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #3480FC!important;
}

.appointment-completed{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #5AC35A!important;
}

.appointment-rejected{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #F45A49!important;
}

.appointment-requested{
    background: #e0ede8 0% 0% no-repeat padding-box;
    border-radius: 8px;
    font-size: 10px;
    padding: 5px;
    color: #FFB800!important;
}

.form-height{
    height: 48px;
    margin-bottom: 3%;
}
.btn-primary-custom{
    /* width: 98px; */
    height: 38px;
    /* UI Properties */
    background: var(--primary) 0% 0% no-repeat padding-box;
    background: #FFD307 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
}

.btn-primary-outline-custom{
    /* width: 98px; */
    height: 38px;
    /* UI Properties */
    border: solid 1px #FFD307;
    border-radius: 6px;
    opacity: 1;
}
.form-control3{
    border:0px solid;
}
.input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    visibility: hidden;
    display: none;
  }
  
  .check {
    position: relative;
    display: block;
    width: 36px;
    height: 20px;
    background-color: #092c3e;
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    transition: ease-in 0.5s;
  }
  
  .input:checked[type="checkbox"] ~ .check {
    background-color: #fff;
  /*   box-shadow: 0 0 0 1200px #092c3e; */
  }
  
  .check:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    background-color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: all 0.5s;
  }
  
  .input:checked[type="checkbox"] ~ .check:before {
    transform: translateX(-50px);
  }
  
  .check:after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    background-color: #092c3e;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translateX(50px);
    transition: all 0.5s;
    
  }
  
  .input:checked[type="checkbox"] ~ .check:after {
    transform: translateX(0px);
  }

  .toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }
  .toggle.ios .toggle-handle { border-radius: 20rem; }