/*===================
GLOBAL CSS
====================*/
:root {
    --red: #ff4235;
    --pink: #e91e63;
    --purple: #9c27b0;
    --deep-purple: #673ab7;
    --indigo: #3f51b5;
    --blue: #2196f3;
    --light-blue: #03a9f4;
    --cyan: #00bcd4;
    --teal: #009688;
    --green: #4caf50;
    --light-green: #8bc34a;
    --lime: #cddc39;
    --yellow: #ffe821;
    --amber: #ffc107;
    --orange: #ff9000;
    --deep-orange: #ff5722;
    --brown: #795548;
    --grey: #9e9e9e;
    --blue-grey: #607d8b;
    --black: #000000;
    --white: #ffffff;
}

/*Body CSS
====================*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--grey);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--blue-grey);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brown);
}

.btn-gradient-red {
    background-image: linear-gradient(130deg, #ff0000, #ff7800);
    /*background: linear-gradient(130deg,#FF0000,#FF0000,#FF0000,#FF9E5D,#FF0000,#FF0000,#FF0000);*/
    color: #fff;
}

.btn-gradient-yellow {
    background: linear-gradient(
        130deg,
        #ffc10794,
        #ffc107,
        #ffc107,
        #ffc107,
        #ffc107,
        #ffc10794,
        #ffc107,
        #ffc107,
        #ffc107,
        #ffc107
    );
    color: #fff;
}

.btn-gradient-blue {
    background: linear-gradient(
        105deg,
        #4285f4,
        #367cec,
        #2563c7,
        #1048a3,
        #7b2cd2,
        #6011a9,
        #7b2cd2,
        #1048a3,
        #2563c7,
        #367cec,
        #4285f4
    );
    color: #fff;
}

[class*="btn-gradient-"]:hover {
    filter: brightness(0.9);
}

/*BACKGROUND Colors
=============*/
.bg-red {
    background-color: var(--red) !important;
    color: #fff;
}

.bg-pink {
    background-color: var(--pink) !important;
    color: #fff;
}

.bg-purple {
    background-color: var(--purple) !important;
    color: #fff;
}

.bg-deep-purple {
    background-color: var(--deep-purple) !important;
    color: #fff;
}

.bg-indigo {
    background-color: var(--indigo) !important;
    color: #fff;
}

.bg-blue {
    background-color: var(--blue) !important;
    color: #fff;
}

.bg-light-blue {
    background-color: var(--light-blue) !important;
    color: #fff;
}

.bg-cyan {
    background-color: var(--cyan) !important;
    color: #fff;
}

.bg-teal {
    background-color: var(--teal) !important;
    color: #fff;
}

.bg-green {
    background-color: var(--green) !important;
    color: #fff;
}

.bg-light-green {
    background-color: var(--light-green) !important;
    color: #fff;
}

.bg-lime {
    background-color: var(--lime) !important;
    color: #fff;
}

.bg-yellow {
    background-color: var(--yellow) !important;
    color: #fff;
}

.bg-amber {
    background-color: var(--amber) !important;
    color: #fff;
}

.bg-orange {
    background-color: var(--orange) !important;
    color: #fff;
}

.bg-deep-orange {
    background-color: var(--deep-orange) !important;
    color: #fff;
}

.bg-brown {
    background-color: var(--brown) !important;
    color: #fff;
}

.bg-grey {
    background-color: var(--grey) !important;
    color: #fff;
}

.bg-blue-grey {
    background-color: var(--blue-grey) !important;
    color: #fff;
}

.bg-black {
    background-color: var(--black) !important;
    color: #fff;
}

.bg-white {
    background-color: var(--white) !important;
    color: #000;
}

/*COLORS
=============*/
.col-red {
    color: var(--red) !important;
}

.col-pink {
    color: var(--pink) !important;
}

.col-purple {
    color: var(--purple) !important;
}

.col-deep-purple {
    color: var(--deep-purple) !important;
}

.col-indigo {
    color: var(--indigo) !important;
}

.col-blue {
    color: var(--blue) !important;
}

.col-light-blue {
    color: var(--light-blue) !important;
}

.col-cyan {
    color: var(--cyan) !important;
}

.col-teal {
    color: var(--teal) !important;
}

.col-green {
    color: var(--green) !important;
}

.col-light-green {
    color: var(--light-green) !important;
}

.col-lime {
    color: var(--lime) !important;
}

.col-yellow {
    color: var(--yellow) !important;
}

.col-amber {
    color: var(--amber) !important;
}

.col-orange {
    color: var(--orange) !important;
}

.col-deep-orange {
    color: var(--deep-orange) !important;
}

.col-brown {
    color: var(--brown) !important;
}

.col-grey {
    color: var(--grey) !important;
}

.col-blue-grey {
    color: var(--blue-grey) !important;
}

.col-black {
    color: var(--black) !important;
}

.col-white {
    color: var(--white) !important;
}

/*BOX SHADOW
=============*/
.shadow-sm-red {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 66, 53, 0.075) !important;
}

.shadow-sm-pink {
    box-shadow: 0 0.125rem 0.25rem rgba(233, 30, 99, 0.075) !important;
}

.shadow-sm-purple {
    box-shadow: 0 0.125rem 0.25rem rgba(156, 39, 176, 0.075) !important;
}

.shadow-sm-deep-purple {
    box-shadow: 0 0.125rem 0.25rem rgba(103, 58, 183, 0.075) !important;
}

.shadow-sm-indigo {
    box-shadow: 0 0.125rem 0.25rem rgba(63, 81, 181, 0.075) !important;
}

.shadow-sm-blue {
    box-shadow: 0 0.125rem 0.25rem rgba(33, 150, 243, 0.075) !important;
}

.shadow-sm-light-blue {
    box-shadow: 0 0.125rem 0.25rem rgba(3, 169, 244, 0.075) !important;
}

.shadow-sm-cyan {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 188, 212, 0.075) !important;
}

.shadow-sm-teal {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 150, 136, 0.075) !important;
}

.shadow-sm-green {
    box-shadow: 0 0.125rem 0.25rem rgba(76, 175, 80, 0.075) !important;
}

.shadow-sm-light-green {
    box-shadow: 0 0.125rem 0.25rem rgba(139, 195, 74, 0.075) !important;
}

.shadow-sm-lime {
    box-shadow: 0 0.125rem 0.25rem rgba(205, 220, 57, 0.075) !important;
}

.shadow-sm-yellow {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 232, 33, 0.075) !important;
}

.shadow-sm-amber {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 193, 7, 0.075) !important;
}

.shadow-sm-orange {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 144, 0, 0.075) !important;
}

.shadow-sm-deep-orange {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 87, 34, 0.075) !important;
}

.shadow-sm-brown {
    box-shadow: 0 0.125rem 0.25rem rgba(121, 85, 72, 0.075) !important;
}

.shadow-sm-grey {
    box-shadow: 0 0.125rem 0.25rem rgba(158, 158, 158, 0.075) !important;
}

.shadow-sm-blue-grey {
    box-shadow: 0 0.125rem 0.25rem rgba(96, 125, 139, 0.075) !important;
}

.shadow-sm-black {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-sm-white {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important;
}

.shadow-red {
    box-shadow: 0 0.5rem 1rem rgba(255, 66, 53, 0.15) !important;
}

.shadow-pink {
    box-shadow: 0 0.5rem 1rem rgba(233, 30, 99, 0.15) !important;
}

.shadow-purple {
    box-shadow: 0 0.5rem 1rem rgba(156, 39, 176, 0.15) !important;
}

.shadow-deep-purple {
    box-shadow: 0 0.5rem 1rem rgba(103, 58, 183, 0.15) !important;
}

.shadow-indigo {
    box-shadow: 0 0.5rem 1rem rgba(63, 81, 181, 0.15) !important;
}

.shadow-blue {
    box-shadow: 0 0.5rem 1rem rgba(33, 150, 243, 0.15) !important;
}

.shadow-light-blue {
    box-shadow: 0 0.5rem 1rem rgba(3, 169, 244, 0.15) !important;
}

.shadow-cyan {
    box-shadow: 0 0.5rem 1rem rgba(0, 188, 212, 0.15) !important;
}

.shadow-teal {
    box-shadow: 0 0.5rem 1rem rgba(0, 150, 136, 0.15) !important;
}

.shadow-green {
    box-shadow: 0 0.5rem 1rem rgba(76, 175, 80, 0.15) !important;
}

.shadow-light-green {
    box-shadow: 0 0.5rem 1rem rgba(139, 195, 74, 0.15) !important;
}

.shadow-lime {
    box-shadow: 0 0.5rem 1rem rgba(205, 220, 57, 0.15) !important;
}

.shadow-yellow {
    box-shadow: 0 0.5rem 1rem rgba(255, 232, 33, 0.15) !important;
}

.shadow-amber {
    box-shadow: 0 0.5rem 1rem rgba(255, 193, 7, 0.15) !important;
}

.shadow-orange {
    box-shadow: 0 0.5rem 1rem rgba(255, 144, 0, 0.15) !important;
}

.shadow-deep-orange {
    box-shadow: 0 0.5rem 1rem rgba(255, 87, 34, 0.15) !important;
}

.shadow-brown {
    box-shadow: 0 0.5rem 1rem rgba(121, 85, 72, 0.15) !important;
}

.shadow-grey {
    box-shadow: 0 0.5rem 1rem rgba(158, 158, 158, 0.15) !important;
}

.shadow-blue-grey {
    box-shadow: 0 0.5rem 1rem rgba(96, 125, 139, 0.15) !important;
}

.shadow-black {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-white {
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important;
}

.shadow-lg-red {
    box-shadow: 0 1rem 3rem rgba(255, 66, 53, 0.175) !important;
}

.shadow-lg-pink {
    box-shadow: 0 1rem 3rem rgba(233, 30, 99, 0.175) !important;
}

.shadow-lg-purple {
    box-shadow: 0 1rem 3rem rgba(156, 39, 176, 0.175) !important;
}

.shadow-lg-deep-purple {
    box-shadow: 0 1rem 3rem rgba(103, 58, 183, 0.175) !important;
}

.shadow-lg-indigo {
    box-shadow: 0 1rem 3rem rgba(63, 81, 181, 0.175) !important;
}

.shadow-lg-blue {
    box-shadow: 0 1rem 3rem rgba(33, 150, 243, 0.175) !important;
}

.shadow-lg-light-blue {
    box-shadow: 0 1rem 3rem rgba(3, 169, 244, 0.175) !important;
}

.shadow-lg-cyan {
    box-shadow: 0 1rem 3rem rgba(0, 188, 212, 0.175) !important;
}

.shadow-lg-teal {
    box-shadow: 0 1rem 3rem rgba(0, 150, 136, 0.175) !important;
}

.shadow-lg-green {
    box-shadow: 0 1rem 3rem rgba(76, 175, 80, 0.175) !important;
}

.shadow-lg-light-green {
    box-shadow: 0 1rem 3rem rgba(139, 195, 74, 0.175) !important;
}

.shadow-lg-lime {
    box-shadow: 0 1rem 3rem rgba(205, 220, 57, 0.175) !important;
}

.shadow-lg-yellow {
    box-shadow: 0 1rem 3rem rgba(255, 232, 33, 0.175) !important;
}

.shadow-lg-amber {
    box-shadow: 0 1rem 3rem rgba(255, 193, 7, 0.175) !important;
}

.shadow-lg-orange {
    box-shadow: 0 1rem 3rem rgba(255, 144, 0, 0.175) !important;
}

.shadow-lg-deep-orange {
    box-shadow: 0 1rem 3rem rgba(255, 87, 34, 0.175) !important;
}

.shadow-lg-brown {
    box-shadow: 0 1rem 3rem rgba(121, 85, 72, 0.175) !important;
}

.shadow-lg-grey {
    box-shadow: 0 1rem 3rem rgba(158, 158, 158, 0.175) !important;
}

.shadow-lg-blue-grey {
    box-shadow: 0 1rem 3rem rgba(96, 125, 139, 0.175) !important;
}

.shadow-lg-black {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-lg-white {
    box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important;
}

/*TEXT SHADOW 
===========*/
.text-shadow-sm {
    text-shadow: 0 1px 2px rgb(0 0 0 / 39%) !important;
}

.text-shadow {
    text-shadow: 0 2px 4px rgb(0 0 0 / 39%) !important;
}

.text-shadow-lg {
    text-shadow: 0 3px 6px rgb(0 0 0 / 45%) !important;
}

/*FONT SIZE 
===========*/
.font-6 {
    font-size: 6px !important;
}

.font-7 {
    font-size: 7px !important;
}

.font-8 {
    font-size: 8px !important;
}

.font-9 {
    font-size: 9px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-17 {
    font-size: 17px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-19 {
    font-size: 19px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-21 {
    font-size: 21px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-23 {
    font-size: 23px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-27 {
    font-size: 27px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-29 {
    font-size: 29px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-31 {
    font-size: 31px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-33 {
    font-size: 33px !important;
}

.font-34 {
    font-size: 34px !important;
}

.font-35 {
    font-size: 35px !important;
}

.font-36 {
    font-size: 36px !important;
}

.font-37 {
    font-size: 37px !important;
}

.font-38 {
    font-size: 38px !important;
}

.font-39 {
    font-size: 39px !important;
}

.font-40 {
    font-size: 40px !important;
}

.font-41 {
    font-size: 41px !important;
}

.font-42 {
    font-size: 42px !important;
}

.font-43 {
    font-size: 43px !important;
}

.font-44 {
    font-size: 44px !important;
}

.font-45 {
    font-size: 45px !important;
}

.font-46 {
    font-size: 46px !important;
}

.font-47 {
    font-size: 47px !important;
}

.font-48 {
    font-size: 48px !important;
}

.font-49 {
    font-size: 49px !important;
}

.font-50 {
    font-size: 50px !important;
}

.font-60 {
    font-size: 60px !important;
}

.font-70 {
    font-size: 70px !important;
}

.font-80 {
    font-size: 80px !important;
}

.font-90 {
    font-size: 90px !important;
}

.font-100 {
    font-size: 100px !important;
}

/* Verical Height  */
.vh-10 {
    height: 10vh !important;
}

.vh-20 {
    height: 20vh !important;
}

.vh-30 {
    height: 30vh !important;
}

.vh-40 {
    height: 40vh !important;
}

.vh-50 {
    height: 50vh !important;
}

.vh-60 {
    height: 60vh !important;
}

.vh-70 {
    height: 70vh !important;
}

.vh-80 {
    height: 80vh !important;
}

.vh-90 {
    height: 90vh !important;
}

.vh-100 {
    height: 100h !important;
}

/* Verical Width  */
.vw-10 {
    width: 10vw !important;
}

.vw-20 {
    width: 20vw !important;
}

.vw-30 {
    width: 30vw !important;
}

.vw-40 {
    width: 40vw !important;
}

.vw-50 {
    width: 50vw !important;
}

.vw-60 {
    width: 60vw !important;
}

.vw-70 {
    width: 70vw !important;
}

.vw-80 {
    width: 80vw !important;
}

.vw-90 {
    width: 90vw !important;
}

.vw-100 {
    width: 100vw !important;
}

/* width in PX */

.wpx-10 {
    width: 10px !important;
}

.wpx-20 {
    width: 20px !important;
}

.wpx-30 {
    width: 30px !important;
}

.wpx-40 {
    width: 40px !important;
}

.wpx-50 {
    width: 50px !important;
}

.wpx-60 {
    width: 60px !important;
}

.wpx-70 {
    width: 70px !important;
}

.wpx-80 {
    width: 80px !important;
}

.wpx-90 {
    width: 90px !important;
}

.wpx-100 {
    width: 100px !important;
}

.wpx-120 {
    width: 120px !important;
}

.wpx-150 {
    width: 150px !important;
}

.wpx-160 {
    width: 160px !important;
}

.wpx-170 {
    width: 170px !important;
}

.wpx-180 {
    width: 180px !important;
}

.wpx-190 {
    width: 190px !important;
}

.wpx-200 {
    width: 200px !important;
}

.wpx-220 {
    width: 220px !important;
}

.wpx-250 {
    width: 250px !important;
}

.wpx-280 {
    width: 280px !important;
}

.wpx-320 {
    width: 320px !important;
}

.hpx-60 {
    height: 60px !important;
}

/* height in PX */
.hpx-10 {
    height: 10px !important;
}

.hpx-20 {
    height: 20px !important;
}

.hpx-30 {
    height: 30px !important;
}

.hpx-40 {
    height: 40px !important;
}

.hpx-50 {
    height: 50px !important;
}

.hpx-60 {
    height: 60px !important;
}

.hpx-70 {
    height: 70px !important;
}

.hpx-80 {
    height: 80px !important;
}

.hpx-90 {
    height: 90px !important;
}

.hpx-100 {
    height: 100px !important;
}

.hpx-120 {
    height: 120px !important;
}

.hpx-150 {
    height: 150px !important;
}

.hpx-160 {
    height: 160px !important;
}

.hpx-170 {
    height: 170px !important;
}

.hpx-180 {
    height: 180px !important;
}

.hpx-190 {
    height: 190px !important;
}

.hpx-200 {
    height: 200px !important;
}

.hpx-220 {
    height: 220px !important;
}

.hpx-250 {
    height: 250px !important;
}

.hpx-280 {
    height: 280px !important;
}

.hpx-320 {
    height: 320px !important;
}

/*===================
BOOTSTRAP Overwrite
====================*/

/*Remove input type NUMBER Arrows/Spinners...*/
.arrow-none::-webkit-outer-spin-button,
.arrow-none::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
    resize: none;
}

/*Remove text area resize icon... */
.resize-none {
    resize: none;
}

/* Button Overwrite */
[class*="btn"]:not(:disabled):not(.disabled):active:focus {
    transform: scale(1.01);
    -ms-transform: scale(1.01);
    transition: box-shadow 50ms !important;
}

.swal-button:focus,
.swal-button:active {
    box-shadow: 0 0 12px 0.1rem var(--primary) !important;
}

.btn:focus,
.btn:active {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 5px 12px 0.1rem var(--secondary) !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--primary) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--secondary) !important;
}

.btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--success) !important;
}

.btn-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--danger) !important;
}

.btn-warning:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--warning) !important;
}

.btn-info:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--info) !important;
}

.btn-light:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--light) !important;
}

.btn-dark:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 12px 0.1rem var(--dark) !important;
}