.custom-primary {
    color: #26A69A;
}

.custom-bg-primary {
    background-color: #E3F4F2;
}

.content{
    max-height: 100% !important;
}

.custom-h {
    display: flex;
    flex-direction: column;
    max-height: 100% !important;
}


.custom-btn {
    color: white;
    background-color: #26A69A;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

.custom-btn:hover {
    color: white !important;
    background-color: #229489 !important;
}

.custom-btn-alt{
    color: #26A69A;
    background-color: #D7EFED;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

.custom-btn-alt:hover {
    color: #26A69A;
    background-color: #c5f0ec;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

.footer-link {
    color: #26A69A;
    text-decoration: none;
}

.footer-link:hover {
    color: #EC631D;
}

.custom-psd-btn {
    color: #26A69A;
    background-color: #f0f2f5;
}

.custom-psd-btn:hover {
    background-color: #E6F2F1 !important;
    color: #26A69A;
}


/* For styling DNI Switch */
.e-switch-wrapper .e-switch-handle, .e-css .e-switch-wrapper .e-switch-handle {
    background-color: #26A69A !important;
    border: 1px solid #26A69A !important;
}

.e-switch-wrapper .e-switch-inner, .e-css.e-switch-wrapper .e-switch-inner {
    border: 1px solid #26A69A !important;
    background-color: #26A69A !important;
}

#app > div.page-content > div > div.content-inner > div > div > form > div > div.col-lg-3.non-printable > div > div.card-body.pt-0 > div > div.row.mt-1 > div.col-auto.pr-0 > div > span.e-switch-inner.e-switch-active {
    border: 1px solid #26A69A !important;
    background-color: #26A69A !important;
}

#app > div.page-content > div > div.content-inner > div > div > form > div > div.col-lg-3.non-printable > div > div.card-body.pt-0 > div > div.row.mt-2 > div.col-auto.pr-0 > div > span.e-switch-inner.e-switch-active {
    border: 1px solid #26A69A !important;
    background-color: #26A69A !important;
}

.e-switch-wrapper .e-switch-on, .e-css .e-switch-wrapper .e-switch-on {
    background-color: #26A69A !important;
    border: 1px solid #26A69A !important;
}


/* For styling custom check and toggle button */
.custom-control-input:focus ~
.custom-control-label::before {
    /* when the button is toggled off 
  it is still in focus and a violet border will appear */
    border-color: #26A69A !important;
    /* box shadow is blue by default
  but we do not want any shadow hence we have set 
  all the values as 0 */
    box-shadow: 0 0 0 0rem rgba(0, 0, 0, 0) !important;
}

/*sets the background color of
          switch to violet when it is checked*/
.custom-control-input:checked ~
.custom-control-label::before {
    border-color: #26A69A !important;
    background-color: #26A69A !important;
}

/*sets the background color of
          switch to violet when it is active*/
.custom-control-input:active ~
.custom-control-label::before {
    background-color: #26A69A !important;
    border-color: #26A69A !important;
}

/*sets the border color of switch
          to violet when it is not checked*/
.custom-control-input:focus:
not(:checked) ~ .custom-control-label::before {
    border-color: #26A69A !important;
}


/* radio button */

.Radio {
    display: inline-flex;
    align-items: center;
}


.Radio-Input {
    margin: 0 0.5em 0;
}

/* Tour stylings */
.actions-hotspot, .settings-hotspot, .filter-hotspot {
    position: relative;
    right: 5px,
}

.pos-hotspot-studentstable {
    position: relative;
    top: 360px;
    z-index: 1025;
    left: 96px;
    width: 20%;
}

.shepherd-element{
    margin-top: 20px !important;
}

/* Dark mode stylings */
.t-dark .card-header {
    border-bottom: 1px solid #75757545;
}

.t-dark .card-footer {
    border-top: 1px solid #75757545;
}

.t-dark .btn-teal-100 {
    background-color: #7ec0ba1f !important;
    border: none !important;
}

.t-dark .btn-teal-100:hover {
    color: white !important;
}