#login-pic {
    background:url(../img/login.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 500px;
}


 /* standard button */
.btn-std  {
    min-width: 100px;
    border: 1px solid;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    /*border-color: rgb(40, 167, 69);*/
    border-color: rgb(0, 0, 128);
    font-weight: 600;
    font-size: 16px;
    /*color: rgb(40, 167, 69);*/
    color: rgb(0, 0, 128);
}


 /* standard button - On hover */
.btn-std:hover,
.btn-std:focus {
    background: linear-gradient(180deg, #0000ff 25%, #000080 75%);
    /*background: linear-gradient(180deg, #5cb85c 25%, #28a745 75%);*/
    color: #fff;
}


 /* poke button */
.btn-poke  {
    min-width: 50px;
    margin: 5px;
    padding: 2px;
    border: 1px solid;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    /*border-color: rgb(40, 167, 69);*/
    border-color: rgb(0, 0, 128);
    font-weight: 700;
    font-size: 12px;
    /*color: rgb(40, 167, 69);*/
    color: rgb(0, 0, 128);
}


 /* poke button - On hover */
.btn-poke:hover,
.btn-poke:focus,
.btn-poke.poked{
    background: linear-gradient(180deg, #0000ff 25%, #000080 75%);
    /*background: linear-gradient(180deg, #5cb85c 25%, #28a745 75%);*/
    color: #fff;
}

 /* standard delete button */
.btn-std-delete  {
    min-width: 100px;
    border: 1px solid;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(220, 53, 69);
    font-weight: 600;
    font-size: 16px;
    color: rgb(220, 53, 69);
}

 /* delete button - On hover */
.btn-std-delete:hover,
.btn-std-delete:focus {
    background: linear-gradient(180deg, #d9534f 25%, #dc3545 75%);
    color: #fff;
}

/* theme text */
.text-theme {
    color: rgb(0, 0, 128);
   /* color: rgb(40, 167, 69);*/
}

/* theme background */
.bg-theme {
    background-color: rgb(0, 0, 128);
   /* background-color: rgb(40, 167, 69);*/
}

/* theme border */
.border-std {
    border-color: rgb(0, 0, 128);
    /*border-color: rgb(40, 167, 69);*/
}

/*table row*/
thead, th, tr  {
    line-height: 14px;
}

/*sub-total*/
.sub-total  {
    border-top: 1px solid;
    border-color: #85929e;
}

/*total*/
.total  {
    border-top: 1px solid;
    border-bottom: 3px double;
    border-color: #85929e;
}

 /* card */
.card  {
       box-shadow: 4px 4px 4px grey;
}

 /* card header */
.card-header, .modal-header  {
    padding-top: 8px;
    padding-bottom: 8px;
    background: linear-gradient(180deg, #0000ff 25%, #000080 75%);
    /*background: linear-gradient(180deg, #5cb85c 25%, #28a745 75%);*/
    text-align: center;
    color: #fff;
}

 /* nav item */
.nav-tabs .nav-item {
    background-color: #f8f9fa;
    text-align: center;
    width: 14rem;
    }

  /* nav pill - not active */
.nav-pills>li>a {
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0, 123, 255);
    /*border-color: rgb(40, 167, 69);*/
    width: 14rem;
    text-align: center;
    color: rgb(0, 123, 255);
    /*color: rgb(40, 167, 69);*/
}

/* nav pill - active */
.nav-pills>li>a.active {
    background: linear-gradient(180deg, #0000ff 25%, #000080 75%);
    /*background: linear-gradient(180deg, #5cb85c 25%, #28a745 75%);*/
    width: 14rem;
    text-align: center;
    color: 	#fff;
    }


/* address-line-1 */
.address-line1 {
    border-radius: 5px 5px 0 0;
}

/* address-line-2 */
.address-line2 {
    border-radius: 0px;
}

/* address-line-3 */
.address-line3 {
    border-radius: 0 0 5px 5px;
}

/* invoice-box */
.invoice-box, .event-box {
    border-radius: 0px;
}

 /* reminder-block */
.reminder-block  {
    padding: 1rem;
    margin: 1rem;
    border: 1px solid;
    border-style: solid;
    border-width: 1px;
    /*border-color: rgb(40, 167, 69);*/
    border-color: rgb(0, 0, 128);
    border-radius: 5px;
    box-shadow: 4px 4px 4px grey;
}

/*input group prepend/append */
.input-group > .input-group-prepend > .form-control,
.input-group > .input-group-append:not(:last-child) > .form-control {
    border-radius: 5px 0 0 5px;
}

.input-group > .input-group-append > .form-control,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .form-control,
.right-rounded-border{
    border-radius: 0 5px 5px 0 !important;
}

/* flex wrapper */
.flex-wrapper {
  display: flex;
  min-height: 680px;
  flex-direction: column;
}

/* shape divider */
.shapedividers{
    overflow:hidden;
    position:relative;
}
.shapedividers::before{
    content:'';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.7vw;
    left: -0.2vw;
    right: -0.1vw;
    top: -0.1vw;
    background-size: 100% 130px;
    background-position: 100% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g fill="%23000080"><path opacity=".5" d="M0 51v15l724-43L0 51z"/><path opacity=".3" d="M0 0v51l600-23L0 0z"/><path d="M0 65v38l1000-3V0L0 65z"/></g></svg>');

/*    background-position: 87% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g fill="%2328a745"><path opacity=".5" d="M0 51v15l724-43L0 51z"/><path opacity=".3" d="M0 0v51l600-23L0 0z"/><path d="M0 65v38l1000-3V0L0 65z"/></g></svg>');*/
}

@media (min-width:2100px){
.shapedividers::before{
    background-size: 100% calc(2vw + 130px);
}
}

table tr td{
    vertical-align: middle !important;
}

table tr{
    line-height:1.5;
}

input[type="date"], input[type="month"]{
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after,input[type="month"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f073";
    color: #555;
    padding: 0 5px;
    position: absolute;
    top: 6px;
    right: 5px;
}

/* change color of symbol on hover */
input[type="date"]:hover:after,input[type="month"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button,input[type="month"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button, input[type="month"]::-webkit-clear-button {
     z-index: 1;
 }

.tooltipevent{
    width:300px;/*
    height:100px;*/
    background:#ccc;
    position:absolute;
    z-index:10001;
    transform:translate3d(-50%,-100%,0);
    font-size: 0.8rem;
    box-shadow: 1px 1px 3px 0px #888888;
    line-height: 1rem;
}
.tooltipevent div{
    padding:10px;
}
.tooltipevent div:first-child{
    font-weight:bold;
    color:White;
    background-color:#888888;
}
.tooltipevent div:last-child{
    background-color:whitesmoke;
    position:relative;
}
.tooltipevent div:last-child::after, .tooltipevent div:last-child::before{
    width:0;
    height:0;
    border:solid 5px transparent;/*
    box-shadow: 1px 1px 2px 0px #888888;*/
    border-bottom:0;
    border-top-color:whitesmoke;
    position: absolute;
    display: block;
    content: "";
    bottom:-4px;
    left:50%;
    transform:translateX(-50%);
}
.tooltipevent div:last-child::before{
    border-top-color:#888888;
    bottom:-5px;
}

.cursor-pointer{
  cursor: pointer;
}

[data-poke]{
    color: #ddad46;
}

.filter-checkbox{
    height: 25px;
    width: 25px;
}

.export-button{
    border-radius: 0.25rem !important;
    margin-left: 5px !important;
}


.reminder-day{
    max-width: 60px;
}

.reminder-choice{
    max-width: 185px;
    overflow: hidden;
}

.registers-box {
    border-radius: 0px;
    min-width: 200px;
}

/* Positioning the enlarged switch */
.lock-registers-toggle > .custom-control-label {
    padding-left: 1.75rem;
}

/* Sync the animation for switch knob */
.lock-registers-toggle > .custom-control-input:checked ~ .custom-control-label::after {
    -webkit-transform: scale(1.75) translateX(0.75rem);
    transform: scale(1.75) translateX(0.75rem);
}

/* Enlarge and position the switch knob */
.lock-registers-toggle > .custom-control-label::after {
    left: -2.1rem;
    transform: scale(1.75);
}

/* Enlarge and position the switch socket */
.lock-registers-toggle > .custom-control-label::before {
    left: -2rem;
    transform: scale(1.75);
}

.ceasation-highlight{
    background-color: #D6DBDF !important;
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Higher z-index to place it on top */
}

.loader {
    border: 4px solid #f3f3f3; /* Light gray border */
    border-top: 4px solid #3498db; /* Blue border */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.shareholder-register-note{
    color: red;
}