/*
*   Many reusable common css style can be injected into the document head for
*   saving developers time to achieve common design goal. Any css class here
*   starts with jst keyword to define the namespace in CSS styling.
* */

/*************************************************
*   RESET WITH COMMON OR ANY BOOTSTRAP STYLING   *
**************************************************/

input, button, textarea, select {
    box-shadow: none !important;
    outline: none !important;
}

.material-icons {
    line-height: 1.5rem;
    padding-bottom: 0.188rem;
    vertical-align: middle;
    -moz-user-select: none !important;
    user-select: none !important;
}

thead th {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 90%;
}

tbody {
    border-top: 0 !important;
}

tbody tr:nth-child(even) {  }

tbody td {
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: 0 !important;
}


/*********************
*   Margin styling   *
**********************/

.jst-m-0    { margin: 0         !important; }
.jst-m-4    { margin: 0.25rem   !important; }
.jst-m-8    { margin: 0.5rem    !important; }
.jst-m-16   { margin: 1rem      !important; }
.jst-m-32   { margin: 2rem      !important; }
.jst-m-48   { margin: 3rem      !important; }
.jst-m-64   { margin: 4rem      !important; }

.jst-mx-0   { margin-left: 0        !important;     margin-right: 0         !important; }
.jst-mx-4   { margin-left: 0.25rem  !important;     margin-right: 0.25rem   !important; }
.jst-mx-8   { margin-left: 0.5rem   !important;     margin-right: 0.5rem    !important; }
.jst-mx-16  { margin-left: 1rem     !important;     margin-right: 1rem      !important; }
.jst-mx-32  { margin-left: 2rem     !important;     margin-right: 2rem      !important; }
.jst-mx-48  { margin-left: 3rem     !important;     margin-right: 3rem      !important; }
.jst-mx-64  { margin-left: 4rem     !important;     margin-right: 4rem      !important; }

.jst-my-0   { margin-top: 0         !important;     margin-bottom: 0        !important; }
.jst-my-4   { margin-top: 0.25rem   !important;     margin-bottom: 0.25rem  !important; }
.jst-my-8   { margin-top: 0.5rem    !important;     margin-bottom: 0.5rem   !important; }
.jst-my-16  { margin-top: 1rem      !important;     margin-bottom: 1rem     !important; }
.jst-my-32  { margin-top: 2rem      !important;     margin-bottom: 2rem     !important; }
.jst-my-48  { margin-top: 3rem      !important;     margin-bottom: 3rem     !important; }
.jst-my-64  { margin-top: 4rem      !important;     margin-bottom: 4rem     !important; }

.jst-mt-0   { margin-top: 0         !important; }
.jst-mt-4   { margin-top: 0.25rem   !important; }
.jst-mt-8   { margin-top: 0.5rem    !important; }
.jst-mt-16  { margin-top: 1rem      !important; }
.jst-mt-32  { margin-top: 2rem      !important; }
.jst-mt-48  { margin-top: 3rem      !important; }
.jst-mt-64  { margin-top: 4rem      !important; }

.jst-mb-0   { margin-bottom: 0          !important; }
.jst-mb-4   { margin-bottom: 0.25rem    !important; }
.jst-mb-8   { margin-bottom: 0.5rem     !important; }
.jst-mb-16  { margin-bottom: 1rem       !important; }
.jst-mb-32  { margin-bottom: 2rem       !important; }
.jst-mb-48  { margin-bottom: 3rem       !important; }
.jst-mb-64  { margin-bottom: 4rem       !important; }

.jst-ms-0   { margin-left: 0        !important; }
.jst-ms-4   { margin-left: 0.25rem  !important; }
.jst-ms-8   { margin-left: 0.5rem   !important; }
.jst-ms-16  { margin-left: 1rem     !important; }
.jst-ms-32  { margin-left: 2rem     !important; }
.jst-ms-48  { margin-left: 3rem     !important; }
.jst-ms-64  { margin-left: 4rem     !important; }

.jst-me-0   { margin-right: 0       !important; }
.jst-me-4   { margin-right: 0.25rem !important; }
.jst-me-8   { margin-right: 0.5rem  !important; }
.jst-me-16  { margin-right: 1rem    !important; }
.jst-me-32  { margin-right: 2rem    !important; }
.jst-me-48  { margin-right: 3rem    !important; }
.jst-me-64  { margin-right: 4rem    !important; }


/*********************
*   Padding styling  *
**********************/

.jst-p-0    { padding: 0         !important; }
.jst-p-4    { padding: 0.25rem   !important; }
.jst-p-8    { padding: 0.5rem    !important; }
.jst-p-16   { padding: 1rem      !important; }
.jst-p-32   { padding: 2rem      !important; }
.jst-p-48   { padding: 3rem      !important; }
.jst-p-64   { padding: 4rem      !important; }

.jst-px-0   { padding-left: 0        !important;     padding-right: 0         !important; }
.jst-px-4   { padding-left: 0.25rem  !important;     padding-right: 0.25rem   !important; }
.jst-px-8   { padding-left: 0.5rem   !important;     padding-right: 0.5rem    !important; }
.jst-px-16  { padding-left: 1rem     !important;     padding-right: 1rem      !important; }
.jst-px-32  { padding-left: 2rem     !important;     padding-right: 2rem      !important; }
.jst-px-48  { padding-left: 3rem     !important;     padding-right: 3rem      !important; }
.jst-px-64  { padding-left: 4rem     !important;     padding-right: 4rem      !important; }

.jst-py-0   { padding-top: 0         !important;     padding-bottom: 0        !important; }
.jst-py-4   { padding-top: 0.25rem   !important;     padding-bottom: 0.25rem  !important; }
.jst-py-8   { padding-top: 0.5rem    !important;     padding-bottom: 0.5rem   !important; }
.jst-py-16  { padding-top: 1rem      !important;     padding-bottom: 1rem     !important; }
.jst-py-32  { padding-top: 2rem      !important;     padding-bottom: 2rem     !important; }
.jst-py-48  { padding-top: 3rem      !important;     padding-bottom: 3rem     !important; }
.jst-py-64  { padding-top: 4rem      !important;     padding-bottom: 4rem     !important; }

.jst-pt-0   { padding-top: 0         !important; }
.jst-pt-4   { padding-top: 0.25rem   !important; }
.jst-pt-8   { padding-top: 0.5rem    !important; }
.jst-pt-16  { padding-top: 1rem      !important; }
.jst-pt-32  { padding-top: 2rem      !important; }
.jst-pt-48  { padding-top: 3rem      !important; }
.jst-pt-64  { padding-top: 4rem      !important; }

.jst-pb-0   { padding-bottom: 0          !important; }
.jst-pb-4   { padding-bottom: 0.25rem    !important; }
.jst-pb-8   { padding-bottom: 0.5rem     !important; }
.jst-pb-16  { padding-bottom: 1rem       !important; }
.jst-pb-32  { padding-bottom: 2rem       !important; }
.jst-pb-48  { padding-bottom: 3rem       !important; }
.jst-pb-64  { padding-bottom: 4rem       !important; }

.jst-ps-0   { padding-left: 0        !important; }
.jst-ps-4   { padding-left: 0.25rem  !important; }
.jst-ps-8   { padding-left: 0.5rem   !important; }
.jst-ps-16  { padding-left: 1rem     !important; }
.jst-ps-32  { padding-left: 2rem     !important; }
.jst-ps-48  { padding-left: 3rem     !important; }
.jst-ps-64  { padding-left: 4rem     !important; }

.jst-pe-0   { padding-right: 0       !important; }
.jst-pe-4   { padding-right: 0.25rem !important; }
.jst-pe-8   { padding-right: 0.5rem  !important; }
.jst-pe-16  { padding-right: 1rem    !important; }
.jst-pe-32  { padding-right: 2rem    !important; }
.jst-pe-48  { padding-right: 3rem    !important; }
.jst-pe-64  { padding-right: 4rem    !important; }


/********************
*   Layout styling  *
*********************/

.jst-lay-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jst-lay-xs { display: flex; justify-content: flex-start; }

.jst-lay-xe { display: flex; justify-content: flex-end; }

.jst-lay-xc { display: flex; justify-content: center; }

.jst-lay-xsa {display: flex;  justify-content: space-around; }

.jst-lay-xsb {display: flex;  justify-content: space-between; }

.jst-lay-xse {display: flex;  justify-content: space-evenly; }

.jst-lay-ys { display: flex; align-items: flex-start; }

.jst-lay-ye { display: flex; align-items: flex-end; }

.jst-lay-yst { display: flex; align-items: stretch; }

.jst-lay-yc { display: flex; align-items: center; }

.jst-lay-yb { display: flex; align-items: baseline; }

.jst-lay-xs-ys {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.jst-lay-xs-ye {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.jst-lay-xs-yst {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

.jst-lay-xs-yc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.jst-lay-xs-yb {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

.jst-lay-xe-ys {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.jst-lay-xe-ye {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.jst-lay-xe-yst {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}

.jst-lay-xe-yc {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.jst-lay-xe-yb {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.jst-lay-xc-ys {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.jst-lay-xc-ye {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.jst-lay-xc-yst {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.jst-lay-xc-yc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jst-lay-xc-yb {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.jst-lay-xsa-ys {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.jst-lay-xsa-ye {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.jst-lay-xsa-yst {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.jst-lay-xsa-yc {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.jst-lay-xsa-yb {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
}

.jst-lay-xsb-ys {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.jst-lay-xsb-ye {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.jst-lay-xsb-yst {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.jst-lay-xsb-yc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jst-lay-xsb-yb {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.jst-lay-xse-ys {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}
.jst-lay-xse-ye {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}
.jst-lay-xse-yst {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
}
.jst-lay-xse-yc {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.jst-lay-xse-yb {
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
}

/************************
*   Typography styling  *
*************************/

.jst-txt-sm { font-size: .875rem !important; }

.jst-txt-xs { font-size: .75rem !important; }

.jst-txt-white { color: white !important; }


/********************
*   Button styling  *
*********************/

.jst-icon-swap {}

.jst-btn-icon-cir, .jst-btn-icon-cir-lg {
    margin: 0;
    padding: 0;
    width: 2.438rem;
    height: 2.438rem;
    border-radius: 50%;
    border-color: transparent;
}

.jst-btn-icon-cir-lg {
    width: 3rem;
    height: 3rem;
}

.jst-btn-icon-cir .material-icons, .jst-btn-icon-cir-lg .material-icons { padding: 0; }

.jst-btn .material-icons {
    line-height: 0.001;
    padding-bottom: 0.25rem;
}

.jst-btn-icon-only {  }

.jst-btn-icon-only .material-icons {
    line-height: 1.5rem;
    padding-bottom: 0;
}

.jst-modal-header .material-icons {
    vertical-align: initial;
    line-height: initial;
    display: initial;
    padding-bottom: 0;
}

.jst-btn-green, .jst-btn-red, .jst-btn-yellow, .jst-btn-blue,
.jst-btn-teal, .jst-btn-white, .jst-btn-black, .jst-btn-dark {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.jst-btn-dark {
    color: #fff;
    background-color: #52525E;
    border-color: #52525E;
}
.jst-btn-dark:hover {
    color: #fff;
    background-color: #7D8695;
    border-color: #7D8695;
}

.jst-btn-white {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.jst-btn-white:hover {
    color: #000;
    background-color: #f9fafb;
    border-color: #f9fafb;
}

.jst-btn-black {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}
.jst-btn-black:hover {
    color: #fff;
    background-color: #1c1f23;
    border-color: #1a1e21;
}

.jst-btn-green {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.jst-btn-green:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

.jst-btn-red {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.jst-btn-red:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.jst-btn-yellow {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}
.jst-btn-yellow:hover {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.jst-btn-teal {
    color: #000;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}
.jst-btn-teal:hover {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2;
}

.jst-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

/************************
*   Background classes  *
*************************/

.jst-bg-green { background-color: #00CC88; !important; }

.jst-bg-red { background-color: #FF3366 !important; }

.jst-bg-blue { background-color: #0D6EFD !important; }

.jst-bg-yellow { background-color: #FFAA33 !important; }

/********************************************
*   jsTea styling for Form input feedback   *
*********************************************/

.jst-form-msg { font-size: 0.875rem; }


/*************************************************
*   jsTea styling for Overlay, Modal & Dialog    *
**************************************************/

.jst-overlay {
    opacity: .5;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100;
}

.jst-overlay-dark {  opacity: .85; }

.jst-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
}

#jst-dialog { z-index: 102; }

.jst-modal-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.jst-modal-flex-child {
    display: flex;
    flex-flow: column;
    max-width: 75%;
    max-height: 75%;
    border-radius: 4px;
    overflow: hidden;
    background-color: white;
    color: black;
}

.jst-modal-flex-child-dark  { background-color: #212529; color: lightgray; }

.jst-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #F7F7F7;
    color: black;
    box-shadow: 0 0 2px gray;
}

.jst-modal-header-dark {
    background-color: #363940;
    color: white;
    box-shadow: 0 0 2px dimgray;
}

.jst-modal-header h5 { margin: 0; }

.jst-modal-icon-close {
    color: gray;
    cursor: pointer;
    border-radius: 1px;
    transition: color 0.5s;
    font-size: 1.25rem;
}

.jst-modal-icon-close-dark { color: gray; }

.jst-modal-icon-close:hover { color: black; }

.jst-modal-icon-close-dark:hover { color: lightgray; }

.jst-modal-content { height: 100%; }

.jst-dialog-btn {
    display: flex;
    justify-content: end;
    padding: 0.75rem;
    background-color: #F7F7F7;
    border-top: 1px solid lightgray;
}

.jst-dialog-btn-dark {
    background-color: #363940;
    border-top-color: transparent;
}

.jst-dialog-btn button { margin-left: 0.313rem; }


/************************
*   Scrollbar styling   *
*************************/

.scrollbar-track-x { width: 10px !important; }

.scrollbar-track-y { width: 10px !important; }

.scrollbar-thumb-x {
    width: 10px !important;
    border-radius: 0 !important;
    cursor: pointer;
}

.scrollbar-thumb-y {
    width: 10px !important;
    border-radius: 0 !important;
    cursor: pointer;
}


/************************
*   ActiveNav styling   *
*************************/

.jst-nav-link {}

.jst-nav-cat { display: none; }

.jst-nav-arrow {}

.jst-nav-act { font-weight: bold; }



/************************
*   Animation classes   *
*************************/

@keyframes jst-keyframes-spin {
    100% { transform: rotate(1turn); }
}
.jst-anim-spin {
    animation: jst-keyframes-spin 2s linear infinite reverse;
}

.jst-anim-spin { padding: 0 !important; }

@keyframes jst-keyframes-pulse {
    0% { transform: scale(0.7); }
    100% { transform: none; }
}
.jst-anim-pulse {
    margin: 0;
    padding: 0;
    animation: jst-keyframes-pulse 0.50s linear infinite alternate-reverse;
}