/* ------Padding----------- */
.p-0 {padding: 0 ;}
.p-5 {padding: 5px !important;}
.p-10 {padding: 10px !important;}
.p-15 {padding: 15px ;}
.p-20 {padding: 20px ;}
.px-0 {padding-left: 0 ;padding-right: 0 ;}
.px-5 {padding-left: 5px ;padding-right: 5px ;}
.px-10 {padding-left: 10px ;padding-right: 10px ;}
.px-15 {padding-left: 15px ;padding-right: 15px ;}
.px-20 {padding-left: 20px ;padding-right: 20px ;}
.py-0 {padding-top: 0 ;padding-bottom: 0 ;}
.py-5 {padding-top:5px ;padding-bottom: 5px ;}
.py-10 {padding-top: 10px ;padding-bottom: 10px;}
.py-15 {padding-top: 15px ;padding-bottom: 15px;}
.py-20 {padding-top: 20px ;padding-bottom: 20px;}
.pt-0 {padding-top: 0;}
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px ;}
.pt-30 {padding-top: 30px ;}
.pt-40 {padding-top: 40px ;}
.pt-50 {padding-top: 50px ;}
.pt-60 {padding-top: 60px ;}
.pt-70 {padding-top: 70px ;}
.pt-80 {padding-top: 80px ;}
.pt-90 {padding-top: 90px ;}
.pt-100 {padding-top: 100px ;}

.pb-0 {padding-bottom: 0 ;}
.pb-5 {padding-bottom: 5px ;}
.pb-10 {padding-bottom: 10px ;}
.pb-15 {padding-bottom: 15px ;}
.pb-20 {padding-bottom: 20px ;}
.pb-30 {padding-bottom: 30px ;}
.pb-30 {padding-bottom: 30px ;}
.pb-40 {padding-bottom: 40px ;}

.pl-0 {padding-left: 0 ;}
.pl-5 {padding-left: 5px ;}
.pl-10 {padding-left: 10px ;}
.pl-15 {padding-left: 15px ;}
.pl-20 {padding-left: 20px ;}
.pr-0 {padding-right: 0 ;}
.pr-5 {padding-right: 5px ;}
.pr-10 {padding-right: 10px ;}
.pr-15 {padding-right: 15px ;}
.pr-20 {padding-right: 20px ;}


/*------ Margin -------- */
.m-0 {margin: 0 ;}
.m-5 {margin: 5px ;}
.m-10 {margin: 10px ;}
.m-15 {margin: 15px ;}
.m-20 {margin: 20px ;}
.m-auto {margin: auto ;}
.mx-0 {margin-left: 0 ;margin-right: 0 ;}
.mx-5 {margin-left: 5px ;margin-right: 5px ;}
.mx-10 {margin-left: 10px ;margin-right: 10px ;}
.mx-15 {margin-left: 15px ;margin-right: 15px ;}
.mx-20 {margin-left: 20px ;margin-right: 20px ;}
.mx-auto {margin-left: auto ;margin-right: auto ;}
.my-0 {margin-top: 0 ;margin-bottom: 0 ;}
.my-5 {margin-top: 5px ;margin-bottom: 5px ;}
.my-10 {margin-top: 10px ;margin-bottom: 10px ;}
.my-15 {margin-top: 15px ;margin-bottom: 15px ;}
.my-20 {margin-top: 20px ;margin-bottom: 20px ;}
.my-auto {margin-top: auto ;margin-bottom: auto ;}
.mt-0 {margin-top: 0 ;}
.mtp-5 {margin-top: 5px ;}
.mt-8 {margin-top: 8px ;}
.mt-10 {margin-top: 10px ;}
.mt-15 {margin-top: 15px ;}
.mt-20 {margin-top: 20px ;}
.mt-30 {margin-top: 30px ;}
.mt-40 {margin-top: 40px ;}
.mt-70 {margin-top: 70px !important;}
.mt-auto {margin-top: auto ;}
.mb-0 {margin-bottom: 0 ;}
.mbt-5 {margin-bottom: 5px ;}
.mb-10 {margin-bottom: 10px ;}
.mb-15 {margin-bottom: 15px ;}
.mb-16 {margin-bottom: 16px ;}
.mb-20 {margin-bottom: 20px !important;}
.mb-auto {margin-bottom: auto ;}
.ml-0 {margin-left: 0 ;}
.ml-5 {margin-left: 5px ;}
.ml-10 {margin-left: 10px ;}
.ml-15 {margin-left: 15px ;}
.ml-20 {margin-left: 20px ;}
.ml-auto {margin-left: auto ;}
.mr-0 {margin-right: 0 ;}
.mr-5 {margin-right: 5px ;}
.mr-10 {margin-right: 10px ;}
.mr-15 {margin-right: 15px ;}
.mr-20 {margin-right: 20px ;}
.mr-auto {margin-right: auto ;}


/* ----------Float------------ */
.float-left {float: left !important;}
.float-right {float: right !important;}
.float-none {float: none !important;}


/* -------Positions---------- */
.position-centered {display: block;float: none;margin-left: auto;margin-right: auto;}
.position-static {position: static !important;}
.position-relative {position: relative !important;}
.position-absolute {position: absolute !important;}
.position-fixed {position: fixed !important;}
.position-sticky {position: -webkit-sticky !important;position: sticky !important;}
.top-0 {top: 0 !important;}
.bottom-0 {bottom: 0 !important;}
.left-0 {left: 0 !important;}
.right-0 {right: 0 !important;}
.top-auto {top: auto !important;}
.bottom-auto {bottom: auto !important;}
.left-auto {left: auto !important;}
.right-auto {right: auto !important;}


/* -----Flex ------- */
.flex-row {-ms-flex-direction: row !important;flex-direction: row !important;}
.flex-column {-ms-flex-direction: column !important;flex-direction: column !important;}
.flex-row-reverse {-ms-flex-direction: row-reverse !important;flex-direction: row-reverse !important;}
.flex-column-reverse {-ms-flex-direction: column-reverse !important;flex-direction: column-reverse !important;}
.flex-wrap {-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}
.flex-nowrap {-ms-flex-wrap: nowrap !important;flex-wrap: nowrap !important;}
.flex-wrap-reverse {-ms-flex-wrap: wrap-reverse !important;flex-wrap: wrap-reverse !important;}
.flex-fill {-ms-flex: 1 1 auto !important;flex: 1 1 auto !important;}
.flex-grow-0 {-ms-flex-positive: 0 !important;flex-grow: 0 !important;}
.flex-grow-1 {-ms-flex-positive: 1 !important;flex-grow: 1 !important;}
.flex-shrink-0 {-ms-flex-negative: 0 !important;flex-shrink: 0 !important;}
.flex-shrink-1 {-ms-flex-negative: 1 !important;flex-shrink: 1 !important;}

/* -------------Width-height--------------- */
.w-25 {width: 25px !important;}
.w-50 {width: 50px !important;}
.w-100 {width: 100px !important;}
.w-150 {width: 150px !important;}
.w-200 {width: 200px !important;}
.w-250 {width: 250px !important;}
.w-300 {width: 300px !important;}
.w-350 {width: 350px !important;}
.w-400 {width: 400px !important;}
.w-450 {width: 450px !important;}
.w-500 {width: 500px !important;}
.w-550 {width: 550px !important;}
.w-600 {width: 600px !important;}
.w-auto {width: auto !important;}
.w-quarter {width: 25% !important;}
.w-half {width: 50% !important;}
.w-three-quarter {width: 75% !important;}
.mw-100 {max-width: 100% !important;}
.width-full{width: 100%;}


/* -------------Max Width-------------- */
.mw-25 {max-width: 25px ;}
.mw-50 {max-width: 50px ;}
.mw-100 {max-width: 100px ;}
.mw-150 {max-width: 150px ;}
.mw-200 {max-width: 200px ;}
.mw-250 {max-width: 250px ;}
.mw-300 {max-width: 300px ;}
.mw-350 {max-width: 350px ;}
.mw-400 {max-width: 400px ;}
.mw-450 {max-width: 450px ;}
.mw-500 {max-width: 500px ;}
.mw-600 {max-width: 600px ;}
.mw-700 {max-width: 700px ;}
.mw-800 {max-width: 800px ;}
.mw-900 {max-width: 900px ;}
.mw-auto {max-width: auto ;}
.mw-quarter {max-width: 25% ;}
.mw-half {max-width: 50% ;}
.mw-three-quarter {max-width: 75% ;}
.mw-100 {max-width: 100% ;}


/* -----Height------- */
.h-25 { height: 25px !important;}
.h-30 { height: 30px !important;}
.h-50 {height: 50px !important;}
.h-100 {height: 100px !important;}
.h-150 { height: 150px !important;}
.h-200 {height: 200px !important;}
.h-250 { height: 250px !important;}
.h-300 {height: 300px !important;}
.h-350 { height: 350px !important;}
.h-400 { height: 400px !important;}
.h-450 { height: 450px !important;}
.h-500 {height: 500px !important;}
.h-550 { height: 550px !important;}
.h-600 { height: 600px !important;}
.h-auto {height: auto !important;}
.h-quarter {height: 25% !important;}
.h-half {height: 50% !important;}
.h-three-quarter {height: 75% !important;}
.mh-100{ max-height: 100% !important;}
.h-100p{ height: 100% !important;}
.vh-70{height: 70vh !important}

/* ----------Containers------------------- */
.container,
.container-fluid { margin-left: auto; margin-right: auto;}
.container-fluid { width: 100%;}
.container {margin-left: auto;margin-right: auto;padding-left: 6.4px;padding-right: 6.4px; width: 100%;}

/* ---------Typography------- */
/* ---heading--- */

h1 { font-size: 64px;line-height: 1;}
h2 {font-size: 58px;line-height: 1;}
h3 {font-size: 48px;line-height: 1;}
h4 {font-size: 38px;line-height: 1;}
h5 {font-size: 29px;}
h6 {font-size: 24px;}


/* ----Font-sizes--- */
.font-size-12 {font-size: 12px;}
.font-size-14 {font-size: 14px;}
.font-size-16 {font-size: 16px;}
.font-size-18 {font-size: 18px;}
.font-size-20 {font-size: 20px;}
.font-size-22 {font-size: 22px;}
.font-size-24 {font-size: 24px;}

/* ----Font-weight----- */

/* Numeric keyword values */
.fw-100 {font-weight: 100 !important;}              /*fw represent font-weight*/
.fw-200 {font-weight: 200 !important;}       
.fw-300 {font-weight: 300 !important;}          
.fw-400 {font-weight: 400 !important;}          /* Normal font*/
.fw-500 {font-weight: 500 !important;}     
.fw-600 {font-weight: 600 !important;}         
.fw-700 {font-weight: 700 !important;}         /* Bold Font*/
.fw-800 {font-weight: 800 !important;}   
.fw-900 {font-weight: 900 !important;}   

/* Keyword values */
.fw-light {font-weight: light;}
.fw-lighter {font-weight: lighter;}
.fw-bolder {font-weight: bolder;}
.fw-bold {font-weight: bold;}
.fw-normal {font-weight: normal;}

/* Global values */
.fw-inherit {font-weight: inherit;}
.fw-initial {font-weight: initial;}
.fw-revert {font-weight: revert;}
.fw-unset {font-weight: unset;}


/* ----anchor tag------ */
/* a {background-color: transparent;color: #3835e1;outline: none;text-decoration: none; -webkit-text-decoration-skip: objects;}
a:focus{box-shadow: 0 0 0 2px rgba(28, 25, 208, 0.2);text-decoration:none;}
a:hover{color: #5755bb;text-decoration: underline; outline-width: 0;}
a.active {color: #121172;text-decoration:none; outline-width: 0;}
a:visited {color: #807fe2 !important;} */


/* ----paragraphy------ */


/* ---- Text------ */
.text-left {text-align: left; display:inline;}
.text-right {text-align: right ;display:inline;}
.text-center {text-align: center; display:inline;}
.text-justify {text-align: justify; display:inline;}
.text-lowercase {text-transform: lowercase; display:inline;}
.text-uppercase {text-transform: uppercase; display:inline;}
.text-capitalize {text-transform: capitalize ; display:inline;}
.text-wrap {white-space: normal; display:inline;}
.text-nowrap {white-space: nowrap; display:inline;}
.text-truncate {overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.text-normal {font-weight: normal !important;}
.text-bold {font-weight: bold !important;}
.text-italic {font-style: italic !important;}
.text-large {font-size: 19px;}
.text-small {font-size: 14px;}
.text-tiny {font-size: 13px;}
.text-muted {opacity: .8;}
.text-reset {color: inherit !important;}
.text-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.text-clip {overflow: hidden;text-overflow: clip;white-space: nowrap;}
.text-break {hyphens: auto;word-break: break-word;word-wrap: break-word;-webkit-hyphens: auto;-ms-hyphens: auto;}
.text-hide {font: 0/0 a;color: transparent;text-shadow: none;background-color: transparent;border: 0;}
.text-decoration-none {text-decoration: none !important;}
.text-decoration-underline {text-decoration: underline !important;}
.text-danger {color: #ff4d4f !important;}
.text-secondary {color: #ffcf00 !important;}
.text-light {color: rgba(255, 255, 255, 0.8) !important;}
.text-dark {color: rgba(0, 0, 0, 0.85) !important;}
.text-underwater{color: #202E65 !important}
.text-primary {
    color: #1890ff !important;
}
.text-underwater {
  color: #202E65; 
}
.text-success {
    color: #0be881 !important;
}
.text-green {
  color: #2BA36B !important; 
}
.text-light-gray {
  color: #707070; 
}
a.text-secondary:hover {
    color: #ffe04d !important;
}
a.text-secondary:focus {
    color: #ffe04d !important;
}
a.text-success:hover {
    color: #81eea8 !important;
}
a.text-success:focus {
    color: #81eea8 !important;
}
a.text-primary:hover {
    color: #45a3fb !important;
}
a.text-primary:focus {
    color: #45a3fb !important;
}
a.text-danger:hover {
    color: #ed586c !important;
}
a.text-danger:focus {
    color: #ed586c !important;
}
a.text-light:hover {
    color: rgba(255, 255, 255, 0.65) !important;
}
a.text-light:focus {
    color: rgba(255, 255, 255, 0.65) !important;
}
a.text-dark:hover {
    color: rgba(0, 0, 0, 0.7) !important;
}
a.text-dark:focus {
    color: rgba(0, 0, 0, 0.7) !important;
}
/* -------------Border ---------- */
.border {border: 1px solid rgba(0, 0, 0, 0.2) !important;}
.border-top {border-top: 1px solid rgba(0, 0, 0, 0.2) !important;}
.border-bottom {border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;}
.border-left {border-left: 1px solid rgba(0, 0, 0, 0.2) !important;}
.border-right {border-right: 1px solid rgba(0, 0, 0, 0.2) !important;}
.border-0 {border: none !important;}
.border-top-0 {border-top: none !important;}
.border-bottom-0 {border-bottom: none !important;}
.border-left-0 {border-left: none !important;}
.border-right-0 {border-right: none !important;}
.rounded-0 {border-radius: 0 !important;}
.rounded {border-radius: 6px !important;}
.rounded-top {border-top-left-radius: 6px !important;border-top-right-radius: 6px !important;}
.rounded-bottom {border-bottom-left-radius: 6px !important;border-bottom-right-radius: 6px !important;}
.rounded-left {border-top-left-radius: 6px !important;border-bottom-left-radius: 6px !important;}
.rounded-right {border-top-right-radius: 6px !important;border-bottom-right-radius: 6px !important;}
.rounded-circle {border-radius: 50% !important;}
.b-transparent {border: 1px solid transparent !important;} /*border-transparent*/
.bl-transparent {border-left: 1px solid transparent !important;} /*border-left-transparent*/
.br-transparent {border-right: 1px solid transparent !important;} /*border-right-transparent*/
.bb-transparent {border-bottom: 1px solid transparent !important;} /*.border-bottom-transparent*/
.bt-transparent {border-top: 1px solid transparent !important;}  /*border-top-transparent*/

/* --------Overflow----------- */
.overflow-hidden {overflow: hidden !important;}
.overflow-x-hidden {overflow-x: hidden !important;}
.overflow-y-hidden {overflow-y: hidden !important;}
.overflow-auto {overflow: auto !important;}
.overflow-x-auto {overflow-x: auto !important;}
.overflow-y-auto {overflow-y: auto !important;}
.overflow-scroll {overflow: scroll !important;}
.overflow-x-scroll {overflow-x: scroll !important;}
.overflow-y-scroll {overflow-y: scroll !important;}

/* --------Colors--------------- */
/*-- Background colors-- */
.bg-white {background-color: #ffffff !important;}
.bg-light {background-color: #ecf0f1 !important;}
.bg-Dlight {background-color: #25282c !important;}
.bg-darker {background-color: #111417 !important;}
.bg-dark {background-color: #191c20 !important;}
.bg-primary {background-color: #1890ff !important;}
.bg-transparent{background-color: transparent !important;}
.bg-success {background-color: #0be881 !important;}
.bg-danger {background-color: #ff4d4f !important;}
.bg-green {background-color: #2BA36B !important;}
.pixel-gray-2 {background-color: #D5D5D5 !important;}

/* --------Tables ------------- */
table {border-collapse: collapse;border-spacing: 0;}
td,
th {padding: 0;}
.table-responsive {overflow-x: auto;}
.table-responsive .table th,
.table-responsive .table td {white-space: nowrap;}
.table {width: 100%;}
.table thead tr {border-bottom: 2px solid #dadfe1;}
.table th {font-weight: 700;}
.table th,
.table td {text-align: left;}
.table th {padding: 19px 24px;}
.table td {padding: 19px 24px;}
.table-bordered {border: 1px solid #dadfe1;  /*Adds border on all sides of the table and cells*/}
.table-hover tbody tr:hover th {background-color: rgba(0, 0, 0, 0.05);}
.table-hover tbody tr:hover td {background-color: rgba(0, 0, 0, 0.05); /*Enables a hover state on table rows within a <tbod*/}
.table tbody tr.active {color: rgba(0, 0, 0, 0.85);background-color: #cfe7fd;border-color: #45a3fb;}
.table-striped tbody tr.active {color: rgba(0, 0, 0, 0.85);background-color: #cfe7fd;border-color: #45a3fb;}
.table-bordered tbody tr.active {color: rgba(0, 0, 0, 0.85);background-color: #cfe7fd;border-color: #45a3fb;}
.table-inner-bordered tbody tr.active {color: rgba(0, 0, 0, 0.85);background-color: #cfe7fd;border-color: #45a3fb;}
.table tbody tr.active th {border-color: #bababc;}
.table tbody tr.active td {border-color: #bababc;}
.table-bordered tbody tr.active th {border-color: #bababc;}
.table-bordered tbody tr.active td {border-color: #bababc;}
.table-inner-bordered tbody tr.active th {border-color: #bababc;}
.table-inner-bordered tbody tr.active td {border-color: #bababc;}
.table tbody tr.success {color: rgba(0, 0, 0, 0.85);background-color: #d5f9e5;border-color: #0be881;}
.table-striped tbody tr.success {color: rgba(0, 0, 0, 0.85);background-color: #d5f9e5;border-color: #0be881;}
.table-bordered tbody tr.success {color: rgba(0, 0, 0, 0.85);background-color: #d5f9e5;border-color: #0be881;}
.table-inner-bordered tbody tr.success {color: rgba(0, 0, 0, 0.85);background-color: #d5f9e5;border-color: #0be881;}
.table tbody tr.success th {border-color: #bababc;}
.table tbody tr.success td {border-color: #bababc;}
.table-bordered tbody tr.success th {border-color: #bababc;}
.table-bordered tbody tr.success td {border-color: #bababc;}
.table-inner-bordered tbody tr.success th {border-color: #bababc;}
.table-inner-bordered tbody tr.success td {border-color: #bababc;}
.table tbody tr.warning {color: rgba(0, 0, 0, 0.85);background-color: #fff6cc;border-color: #ffcf00;}
.table-striped tbody tr.warning {color: rgba(0, 0, 0, 0.85);background-color: #fff6cc;border-color: #ffcf00;}
.table-bordered tbody tr.warning {color: rgba(0, 0, 0, 0.85);background-color: #fff6cc;border-color: #ffcf00;}
.table-inner-bordered tbody tr.warning {color: rgba(0, 0, 0, 0.85);background-color: #fff6cc;border-color: #ffcf00;}
.table tbody tr.warning th {border-color: #bababc;}
.table tbody tr.warning td {border-color: #bababc;}
.table-bordered tbody tr.warning th {border-color: #bababc;}
.table-bordered tbody tr.warning td {border-color: #bababc;}
.table-inner-bordered tbody tr.warning th {border-color: #bababc;}
.table-inner-bordered tbody tr.warning td {border-color: #bababc;}
.table tbody tr.danger {color: rgba(0, 0, 0, 0.85);background-color: #f8d0d9;border-color: #ed586c;}
.table-striped tbody tr.danger {color: rgba(0, 0, 0, 0.85);background-color: #f8d0d9;border-color: #ed586c;}
.table-bordered tbody tr.danger {color: rgba(0, 0, 0, 0.85);background-color: #f8d0d9;border-color: #ed586c;}
.table-inner-bordered tbody tr.danger {color: rgba(0, 0, 0, 0.85);background-color: #f8d0d9;border-color: #ed586c;}
.table tbody tr.danger th {border-color: #bababc;}
.table tbody tr.danger td {border-color: #bababc;}
.table-bordered tbody tr.danger th {border-color: #bababc;}
.table-bordered tbody tr.danger td {border-color: #bababc;}
.table-inner-bordered tbody tr.danger th {border-color: #bababc;}
.table-inner-bordered tbody tr.danger td {border-color: #bababc;}

/* -------Alerts----------------- */
.alert {position: relative;padding: 16px 32px;color: rgba(0, 0, 0, 0.85);background-color: #ffffff;background-image: none;border: 1px solid rgba(0, 0, 0, 0.2);border-radius:6px;}
.alert-heading {color: inherit;font-size: 26px;font-weight: 500;margin: 0 0 8px 0;}
.alert-link{cursor: pointer;color: inherit;text-decoration: underline;}
.alert-link:hover{color: inherit;opacity: 0.75;}
.alert .close {position: absolute;top: 0;right: 0;cursor: pointer;color: inherit;padding: 6px 10px;line-height: 1;font-size: 26px;background-color: transparent;border-color: transparent;}
.alert .close:focus {outline: 2px solid rgba(0, 0, 0, 0.5);outline-offset: 3.2px;}
.alert.dispose { display: none;}
.alert.alert-primary.filled-lm {color: #ffffff;background-color: #1890ff;background-image: none;border-color: #1890ff;}
.alert.alert-success.filled {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;}
.alert.alert-success.filled-lm {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;}
.alert.alert-secondary.filled {color: rgba(0, 0, 0, 0.85);background-color: #ffcf00;background-image: none;border-color: #ffcf00;}
.alert.alert-secondary.filled-lm {color: rgba(0, 0, 0, 0.85);background-color: #ffcf00;background-image: none;border-color: #ffcf00;}
.alert.alert-danger.filled {color: #ffffff;background-color: #ff4d4f;background-image: none;border-color: #ff4d4f;}
.alert.alert-danger.filled-lm {color: #ffffff;background-color: #ff4d4f;background-image: none;border-color: #ff4d4f;}
.alert.alert-primary.filled {color: #ffffff;background-color: #1890ff;background-image: none;border-color: #1890ff;}


/* Sticky alerts */
.sticky-alerts .alert {
    display: none;width: 432px;margin-top: 16px;right: -800px; /* Hidden by default */-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.045);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.045);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.045);}
.sticky-alerts .alert.show {right: 0;-webkit-transition: right .4s cubic-bezier(.25, .8, .25, 1);transition: right .4s cubic-bezier(.25, .8, .25, 1);}
.sticky-alerts .alert.fade {visibility: hidden;opacity: 0;-webkit-transition: visibility 0s .4s, opacity .4s linear;transition: visibility 0s .4s, opacity .4s linear;}
.sticky-alerts .alert.alert-block {display: block;}
.sticky-alerts .alert.alert-block.dispose {display: none;}


/* -----------Cards------------ */
.card {position: relative;margin: 48px;padding: 48px;color: rgba(0, 0, 0, 0.85);background-color: #ffffff;background-image: none;border-radius:6.4px;border: 1px solid rgba(0, 0, 0, 0.2);-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
.card-title {font-size: 32px;font-weight: 500;margin-top: 0;}
.p-card {padding: 48px;}
.px-card {padding-left: 48px;padding-right: 48px;}
.py-card {padding-top: 48px;padding-bottom: 48px;}

/* -------Dropdown--------- */
.dropdown {display: inline-block;position: relative;}
.dropdown-menu {position: absolute;visibility: hidden;z-index: 10;text-align: left;width: auto;min-width: 268px;padding:6px;color: rgba(0, 0, 0, 0.85);background-color: #ffffff;background-image: none;border: 1px solid #bababc;border-radius:6px;-moz-box-shadow: 0 3.2px 6px rgba(0, 0, 0, 0.15);-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);}
.dropdown-content {display: block;padding: 19px;}
.dropdown-content ol {margin-left: 0;}
.dropdown-content ul{margin-left: 0;}
.dropdown-divider {height: 1px;background-color: rgba(0, 0, 0, 0.05);}
.dropdown-item {display: block;white-space: nowrap;padding: 9.6px 19.2px;border-radius: 3.2px;color: rgba(0, 0, 0, 0.85);background-color: transparent;}
.dropdown-item:hover {text-decoration: none;color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0.025);}
.dropdown-header {font-size: 22.4px;font-weight: 500;padding: 9.6px 19.2px;margin: 0;color: rgba(0, 0, 0, 0.6);}


/* ------------ Collapse ----------- */
details,
details * {
    /* Fixes Chrome bug */
    box-sizing: border-box;
}

/* Collapse header */
.collapse-header {
    position: relative;
    cursor: pointer;
    padding: 19px 32px;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.85);
    background-color: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius:6.4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.collapse-header:focus {
    color: rgba(0, 0, 0, 0.85);
    background-color: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.collapse-panel[open] .collapse-header {
    color: rgba(0, 0, 0, 0.85);
    background-color: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.collapse-panel[open] .collapse-header:focus {
    color: rgba(0, 0, 0, 0.85);
    background-color: #f7f7f7;
    border-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}
.collapse-panel[open] .collapse-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Collapse header arrow set using background image */
.collapse-header {
    /* Firefox */
    list-style-type: none;
}
.collapse-header::-webkit-details-marker {
    /* Chrome */
    display: none;
}
.collapse-header::marker {
    display: none;
}
.collapse-header:not(.without-arrow) {
    padding: 19px 32px 19px 70px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC);
    background-size: 9.6px;
    background-repeat: no-repeat;
    background-position: 32px center;
}
.collapse-panel[open] .collapse-header:not(.without-arrow) {
    padding: 19px 32px 19px 70px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 32px center;
}
.collapse-header::after {
    content: "";
    position: absolute;
    display: block;
    top: 3px;
    left: 3px;
    width: calc(100% - (2 * 3px));
    height: calc(100% - (2 * 3px));
    border-radius:6.4px;
}
.collapse-header:focus::after {
    -moz-box-shadow: inset 0 0 0 3.2px #45a3fb;
    -webkit-box-shadow: inset 0 0 0 3.2px #45a3fb;
    box-shadow: inset 0 0 0 3.2px #45a3fb;
}

/* Controlling display based on collapse open state */
.collapse-panel[open] .hidden-collapse-open {
    display: none;
}
.collapse-panel:not([open]) .hidden-collapse-closed {
    display: none;
}
.collapse-content {
    padding: 32px;
    font-size: 22.4px;
    color: rgba(0, 0, 0, 0.85);
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: none;
    border-bottom-left-radius:6.4px;
    border-bottom-right-radius:6.4px;
}

/* Collapse group */
.collapse-group .collapse-panel:not(:first-child) {
    margin-top: calc((-1) * 1px);
}
.collapse-group .collapse-panel:not(:first-child) .collapse-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.collapse-group .collapse-panel[open]:not(:first-child) .collapse-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.collapse-group .collapse-panel[open]:not(:last-child) .collapse-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}

/* ------------- Button ---------- */
/* Primary button */
.btn.btn-primary {color: #ffffff;background-color: #1890ff;background-image: none;border-color: #1890ff;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-primary:hover {color: #ffffff;background-color: #45a3fb;background-image: none;border-color: #45a3fb;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-primary:focus {color: #ffffff;background-color: #1890ff;background-image: none;border-color: #1890ff; -moz-box-shadow: 0 0 0 4.8px rgba(24, 144, 255, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(24, 144, 255, 0.3);box-shadow: 0 0 0 4.8px rgba(24, 144, 255, 0.3);outline-color: transparent;}
.btn.btn-primary.active {color: #ffffff;background-color: #1890ff;background-image: none;border-color: #1890ff;-moz-box-shadow: 0 0 0 4.8px rgba(24, 144, 255, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(24, 144, 255, 0.3);box-shadow: 0 0 0 4.8px rgba(24, 144, 255, 0.3);outline-color: transparent;}
.btn.btn-primary:focus:hover {color: #ffffff;background-color: #45a3fb;background-image: none;}
.btn.btn-primary.active:hover {color: #ffffff;background-color: #45a3fb;background-image: none;}

/* Success button */
.btn.btn-success {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-success:hover {color: rgba(0, 0, 0, 0.85); background-color: #81eea8;background-image: none;border-color: #81eea8;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-success:focus {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: 0 0 0 4.8px rgba(11, 232, 129, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(11, 232, 129, 0.3);box-shadow: 0 0 0 4.8px rgba(11, 232, 129, 0.3);outline-color: transparent;}
.btn.btn-success.active {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: 0 0 0 4.8px rgba(11, 232, 129, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(11, 232, 129, 0.3);box-shadow: 0 0 0 4.8px rgba(11, 232, 129, 0.3);outline-color: transparent;}
.btn.btn-success:focus:hover {color: rgba(0, 0, 0, 0.85);background-color: #81eea8;background-image: none;}
.btn.btn-success.active:hover {color: rgba(0, 0, 0, 0.85);background-color: #81eea8;background-image: none;}
.btn.btn-success.disabled {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.btn-success:disabled {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.btn-success.disabled:hover {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.btn-success.disabled:focus {color: rgba(0, 0, 0, 0.85);background-color: #0be881;background-image: none;border-color: #0be881;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}

/* Secondary button */
.btn.btn-secondary {color: rgba(0, 0, 0, 0.85);background-color: #ffcf00;background-image: none;border-color: #ffcf00;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-secondary:hover {color: rgba(0, 0, 0, 0.85);background-color: #ffe04d;background-image: none;border-color: #ffe04d;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-secondary:focus {color: rgba(0, 0, 0, 0.85);background-color: #ffcf00;background-image: none;border-color: #ffcf00;-moz-box-shadow: 0 0 0 4.8px rgba(255, 207, 0, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(255, 207, 0, 0.3);box-shadow: 0 0 0 4.8px rgba(255, 207, 0, 0.3);outline-color: transparent;}
.btn.btn-secondary.active {color: rgba(0, 0, 0, 0.85);background-color: #ffcf00;background-image: none;border-color: #ffcf00;-moz-box-shadow: 0 0 0 4.8px rgba(255, 207, 0, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(255, 207, 0, 0.3);box-shadow: 0 0 0 4.8px rgba(255, 207, 0, 0.3);outline-color: transparent;}
.btn.btn-secondary:focus:hover {color: rgba(0, 0, 0, 0.85);background-color: #ffe04d; background-image: none;}
.btn.btn-secondary.active:hover {color: rgba(0, 0, 0, 0.85);background-color: #ffe04d;background-image: none;}

/* Danger button */
.btn.btn-danger { color: #ffffff;background-color: #ff4d4f;background-image: none;border-color: #ff4d4f;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-danger:hover {color: #ffffff;background-color: #ed586c;background-image: none;border-color: #ed586c;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn.btn-danger:focus {color: #ffffff;background-color: #ff4d4f;background-image: none;border-color: #ff4d4f;-moz-box-shadow: 0 0 0 4.8px rgba(245, 34, 45, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(245, 34, 45, 0.3);box-shadow: 0 0 0 4.8px rgba(245, 34, 45, 0.3);outline-color: transparent;}
.btn.btn-danger.active {  color: #ffffff;background-color: #ff4d4f;background-image: none; border-color: #ff4d4f;-moz-box-shadow: 0 0 0 4.8px rgba(245, 34, 45, 0.3);-webkit-box-shadow: 0 0 0 4.8px rgba(245, 34, 45, 0.3);box-shadow: 0 0 0 4.8px rgba(245, 34, 45, 0.3); outline-color: transparent;}
.btn.btn-danger:focus:hover {color: #ffffff; background-color: #ed586c;  background-image: none;}
.btn.btn-danger.active:hover {color: #ffffff;background-color: #ed586c;background-image: none;}

/* Square button */
.btn-square { width: 51.2px; padding-left: 0;padding-right: 0;}
.btn-square.btn-sm {width: 41.6px;padding-left: 0; padding-right: 0;}
.btn-square.btn-lg {width: 64px;padding-left: 0; padding-right: 0;}

/* Rounded button */
.btn-rounded {border-radius: 51.2px;}
.btn-rounded.btn-sm {border-radius: 41.6px;}
.btn-rounded.btn-lg {border-radius: 64px;}
.btn {display: inline-block;height: 51.2px;line-height: 51.2px;padding: 0 24px;text-align: center;white-space: nowrap;cursor: pointer;color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border: 1px solid rgba(0, 0, 0, 0.2);border-radius:6.4px;-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn:hover {text-decoration: none;color: rgba(0, 0, 0, 0.7);background-color: #f7f7f7;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3.2px 0 rgba(0, 0, 0, 0.05);}
.btn:focus {color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);-webkit-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);outline: 1px dotted transparent;outline-offset: 3.2px;}
.btn.active {color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);-webkit-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);outline: 1px dotted transparent;outline-offset: 3.2px;}
.btn.active:hover {color: rgba(0, 0, 0, 0.7);background-color: #f7f7f7;background-image: none;}
.btn.disabled,
.btn:disabled {cursor: not-allowed;opacity: 0.6;}
.btn.disabled {color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn:disabled {color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.disabled:hover {color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.disabled:focus {color: rgba(0, 0, 0, 0.7);background-color: #ffffff;background-image: none;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
/* Small button */
.btn-sm {height: 42px;line-height: 42px;padding: 0 16px;font-size: 19px;}
/* Large button */
.btn-lg {height: 64px;line-height: 64px;padding: 0 32px;font-size: 29px;}
/* Block button */
.btn-block {display: block;width: 100%;}

/* Link button */
.btn.btn-link {color: #1890ff;background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
.btn.btn-link:hover {background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
.btn.btn-link:focus {color: #1890ff;background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);-webkit-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);outline-color: transparent;}
.btn.btn-link.active {color: #1890ff;background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);-webkit-box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);box-shadow: 0 0 0 3.2px rgba(24, 144, 255, 0.6);outline-color: transparent;}
.btn.btn-link:focus:hover {color: #45a3fb;background-color: transparent;background-image: none;}
.btn.btn-link.active:hover {color: #45a3fb;background-color: transparent;background-image: none;}
.btn.btn-link.disabled {color: #1890ff; background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.btn-link:disabled {color: #1890ff;background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.btn-link.disabled:hover {color: #1890ff;background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;outline: none;}
.btn.btn-link.disabled:focus {color: #1890ff;background-color: transparent;background-image: none;border-color: transparent;-moz-box-shadow: none; -webkit-box-shadow: none;box-shadow: none;outline: none;}


/* -------------- Button Groups --------------- */
.btn-group-sm .btn {height: 42px;line-height: 42px;padding: 0 16px;font-size: 19px;}
.btn-group-lg .btn {
    height: 64px;
    line-height: 64px;
    padding: 0 32px;
    font-size: 29px;
}
.btn-group-sm .btn-square {
    width: 42px;
    padding-left: 0;
    padding-right: 0;
}
.btn-group-lg .btn-square {
    width: 64px;
    padding-left: 0;
    padding-right: 0;
}
.btn-group-sm .btn-rounded {
    border-radius: 42px;
}
.btn-group-lg .btn-rounded {
    border-radius: 64px
}

/* Button toolbar */
.btn-toolbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.btn-toolbar .input-group {
    width: auto;
}
.btn-toolbar .input-group {
    min-width: 320px;
}

/* Primary button */

.btn-group  .btn.btn-primary {
    border-color: #1890ff;
}

.btn-group-vertical  .btn.btn-primary {
    border-color: #1890ff;
}
.btn-group  .btn.btn-primary:hover {
    border-color: #45a3fb;
}
.btn-group-vertical  .btn.btn-primary:hover {
    border-color: #45a3fb;
}
.btn-group  .btn.btn-primary:focus {
    border-color: #1890ff;
}
.btn-group-vertical  .btn.btn-primary:focus {
    border-color: #1890ff;
}
.btn-group  .btn.btn-primary.active {
    border-color: #1890ff;
}
.btn-group-vertical  .btn.btn-primary.active {
    border-color: #1890ff;
}


/* Success button */

.btn-group  .btn.btn-success {
    border-color: #0be881;
}

.btn-group-vertical  .btn.btn-success {
    border-color: #0be881;
}
.btn-group  .btn.btn-success:hover {
    border-color: #81eea8;
}
.btn-group-vertical  .btn.btn-success:hover {
    border-color: #81eea8;
}
.btn-group  .btn.btn-success:focus {
    border-color: #0be881;
}
.btn-group-vertical  .btn.btn-success:focus {
    border-color: #0be881;
}
.btn-group  .btn.btn-success.active {
    border-color: #0be881;
}
.btn-group-vertical  .btn.btn-success.active {
    border-color: #0be881;
}


/* Secondary button */

.btn-group  .btn.btn-secondary {
    border-color: #ffcf00;
}

.btn-group-vertical  .btn.btn-secondary {
    border-color: #ffcf00;
}
.btn-group  .btn.btn-secondary:hover {
    border-color: #ffe04d;
}
.btn-group-vertical  .btn.btn-secondary:hover {
    border-color: #ffe04d;
}
.btn-group  .btn.btn-secondary:focus {
    border-color: #ffcf00;
}
.btn-group-vertical  .btn.btn-secondary:focus {
    border-color: #ffcf00;
}
.btn-group  .btn.btn-secondary.active {
    border-color: #ffcf00;
}
.btn-group-vertical  .btn.btn-secondary.active {
    border-color: #ffcf00;
}
/* Danger button */

.btn-group  .btn.btn-danger {
    border-color: #ff4d4f;
}

.btn-group-vertical  .btn.btn-danger {
    border-color: #ff4d4f;
}
.btn-group  .btn.btn-danger:hover {
    border-color: #ed586c;
}
.btn-group-vertical  .btn.btn-danger:hover {
    border-color: #ed586c;
}
.btn-group  .btn.btn-danger:focus {
    border-color: #ff4d4f;
}
.btn-group-vertical  .btn.btn-danger:focus {
    border-color: #ff4d4f;
}
.btn-group  .btn.btn-danger.active {
    border-color: #ff4d4f;
}
.btn-group-vertical  .btn.btn-danger.active {
    border-color: #ff4d4f;
}

/* Buttons (only border colors) */
.btn-group .btn {
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-group-vertical .btn {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group .btn:hover {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group-vertical .btn:hover {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group .btn:focus {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group-vertical .btn:focus {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group .btn.active {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group-vertical .btn.active {
    border-color: rgba(0, 0, 0, 0.2);
}

/* Link button */
.btn-group  .btn.btn-link {
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-group-vertical  .btn.btn-link {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group  .btn.btn-link:hover {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group-vertical  .btn.btn-link:hover {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group  .btn.btn-link:focus {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group-vertical  .btn.btn-link:focus {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group  .btn.btn-link.active {
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-group-vertical  .btn.btn-link.active {
    border-color: rgba(0, 0, 0, 0.2);
}

/* ------------Progress Bar --------- */
.progress {display: -ms-flexbox;display: flex;overflow: hidden;height: 12.8px;font-size: 19.2px;line-height: 0;border-radius: 51.2px;background-color: rgba(0, 0, 0, 0.1);}
.progress-bar {display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;-ms-flex-pack: center;justify-content: center;overflow: hidden;text-align: center;white-space: nowrap;color: #ffffff;background-color: #1890ff;border-radius: inherit;}
.progress-bar:not(:only-child) {
    border-radius: 0;
}
.progress-bar:not(:only-child):last-child {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}
/* Progress group */
.progress-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}
.progress-group .progress {
    position: relative;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
}
.progress-group-label {
    font-size: 22px;
}
.progress-group .progress {
    margin-left:6px;
    margin-right:6px;
}
.progress-group .progress-group-label {
    margin-left:6px;
    margin-right:6px;
}
.progress-group .progress:first-child,
.progress-group .progress-group-label:first-child {
    margin-left: 0;
}
.progress-group .progress:last-child,
.progress-group .progress-group-label:last-child {
    margin-right: 0;
}

/* Progress bar animated */
.progress-bar-animated {
    position: relative;
}
.progress-bar-animated::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
    transform: translateX(-100%);
    animation: progress-bar-shine 2s infinite;
}

/* ----------List Group---------- */
ul {list-style: circle inside;}
ol {list-style: decimal inside;}
ol,
ul {padding-left: 0;margin-top: 0;}
ul ul,
ul ol,
ol ol,
ol ul {margin: 24px 0 24px 48px;}
li {margin-bottom: 16px;}
ul li,
ol li { margin-top: 6px;}
ol ol {list-style-type: lower-alpha;}
  ul ul {list-style-type: circle;}


  /* -----loading ------ */

.loading {
    color: transparent !important;
    min-height: 13px;
    pointer-events: none;
    position: relative;
  }
  
  .loading::after {
    animation: loading 500ms infinite linear;
    background: transparent;
    border: 2px solid #5755d9;
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 13px;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
    opacity: 1;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 13px;
    z-index: 1;
  }
  
  .loading.loading-lg {
    min-height: 32px;
  }
  
  .loading.loading-lg::after {
    height: 26px;
    margin-left: -13px;
    margin-top: -13px;
    width: 26px;
  }

/* --------------------------------------------Media Query----------------------------------- */

/* ------------Mobile Devices --------- */
@media (min-width: 320px) and (max-width: 480px){


    /* --container-- */
    .container.grid-xs {max-width: 496px;}

    /* --card-- */
    .card {margin: 32px;padding: 32px;}
    .p-card {padding: 32px;}
   .px-card {padding-left: 32px;padding-right: 32px;}
   .py-card {padding-top: 32px;padding-bottom: 32px;}
}

/* -------Tablets------- */
@media (min-width:481px) and (max-width: 768px) {
    /* --float-- */
    .float-sm-left{float: left !important;}
    .float-sm-right {float: right !important;}
    .float-sm-none{float: none !important;}

    /* --positions-- */
    .position-sm-static {position: static !important;}
    .position-sm-relative {position: relative !important;}
    .position-sm-absolute {position: absolute !important;}
    .position-sm-fixed {position: fixed !important;}
    .position-sm-sticky {position: -webkit-sticky !important;position: sticky !important;}
    .top-sm-0 {top: 0 !important;}
    .bottom-sm-0 {bottom: 0 !important;}
    .left-sm-0 {left: 0 !important;}
    .right-sm-0 {right: 0 !important;}
    .top-sm-auto {top: auto !important;}
    .bottom-sm-auto {bottom: auto !important;}
    .left-sm-auto {left: auto !important;}
    .right-sm-auto {right: auto !important;}

    /*-- container-- */
    .container {max-width: 864px;}
    .container.grid-sm {max-width: 616px;}

    /*--Button groups-- */
    .btn-toolbar .input-group {min-width: 288px;}

}

/* -------Medium screens------ */
@media (min-width: 769px) and (max-width:1024px) {
/* --float-- */
.float-left-md{float: left !important;}
.float-right-md {float: right !important;}
.float-none-md{float: none !important;}

 /* --positions-- */
 .position-md-static {position: static !important;}
 .position-md-relative {position: relative !important;}
 .position-md-absolute {position: absolute !important;}
 .position-md-fixed {position: fixed !important;}
 .position-md-sticky {position: -webkit-sticky !important;position: sticky !important;}
 .top-md-0 {top: 0 !important;}
 .bottom-md-0 {bottom: 0 !important;}
 .left-md-0 {left: 0 !important;}
 .right-md-0 {right: 0 !important;}
 .top-md-auto {top: auto !important;}
 .bottom-md-auto {bottom: auto !important;}
 .left-md-auto {left: auto !important;}
 .right-md-auto {right: auto !important;}

 /* --container-- */
 .container.grid-md {max-width: 856px;}
 .container {max-width: 1152px;}


}

/* --------Laptops & Desktop----- */
@media (min-width: 1025px) and (max-width:1200){
    /* --float-- */
.float-lg-left{float: left !important;}
.float-lg-right {float: right !important;}
.float-lg-none{float: none !important;}

 /* --positions-- */
 .position-lg-static {position: static !important;}
 .position-lg-relative {position: relative !important;}
 .position-lg-absolute {position: absolute !important;}
 .position-lg-fixed {position: fixed !important;}
 .position-lg-sticky {position: -webkit-sticky !important;position: sticky !important;}
 .top-lg-0 {top: 0 !important;}
 .bottom-lg-0 {bottom: 0 !important;}
 .left-lg-0 {left: 0 !important;}
 .right-lg-0 {right: 0 !important;}
 .top-lg-auto {top: auto !important;}
 .bottom-lg-auto {bottom: auto !important;}
 .left-lg-auto {left: auto !important;}
 .right-lg-auto {right: auto !important;}

 /* --container-- */
 .container.grid-lg {max-width: 976px;}
 .container {max-width: 1536px;}


}


/* ---------Extra large screens &  TV------ */
@media (min-width: 1201px) {
    /* --float-- */
.float-xl-left{float: left !important;}
.float-xl-right {float: right !important;}
.float-xl-none{float: none !important;}

 /* --positions-- */
 .position-xl-static {position: static !important;}
 .position-xl-relative {position: relative !important;}
 .position-xl-absolute {position: absolute !important;}
 .position-xl-fixed {position: fixed !important;}
 .position-xl-sticky {position: -webkit-sticky !important;position: sticky !important;}
 .top-xl-0 {top: 0 !important;}
 .bottom-xl-0 {bottom: 0 !important;}
 .left-xl-0 {left: 0 !important;}
 .right-xl-0 {right: 0 !important;}
 .top-xl-auto {top: auto !important;}
 .bottom-xl-auto {bottom: auto !important;}
 .left-xl-auto {left: auto !important;}
 .right-xl-auto {right: auto !important;}

 /* --container-- */
 .container.grid-xl {max-width: 1296px;}
 .container {max-width: 1824px;}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* On IE, collapse panels are styled to be always open. This is because they are not supporter by the browser.*/

    /* Collapse header */
    .collapse-panel .collapse-header {cursor: auto;color: rgba(0, 0, 0, 0.85);background-color: #f7f7f7;border-color: rgba(0, 0, 0, 0.2);-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
    .collapse-panel .collapse-header {border-bottom-left-radius: 0;border-bottom-right-radius: 0;}

    /* Collapse header arrow set using background image */
    .collapse-panel .collapse-header:not(.without-arrow) {
        padding: 19.2px 32px 19.2px 70.4px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);background-size: 16px;background-repeat: no-repeat;background-position: 32px center;}

    /* Controlling display based on collapse open state */
    .collapse-panel .hidden-collapse-open {display: none;}
    .collapse-panel:not([open]) .hidden-collapse-closed { display: inline-block;}

    /* Collapse group */
    .collapse-group .collapse-panel:not(:first-child) .collapse-content {border-top-left-radius: 0;border-top-right-radius: 0;}
    .collapse-group .collapse-panel:not(:last-child) .collapse-content {border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;}
}




/* -------------------------------------@keyframes--------------------------------------------- */
@keyframes progress-bar-shine {
    to 
    {transform: translateX(0);opacity: 0.1;}
}


@keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes slide-down {
    0% {
      opacity: 0;
      transform: translateY(-25.6px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }



  /* UX-2 */

/***** Collapse / Accordion *********************************************************/
  /* accordion { accordion, accordion-1, accordion-2 } = types */

  .accordion > input[type="checkbox"] { position: absolute;  left: -100vw; }
  .accordion .content {
    overflow-y: hidden;
    height: 0;
    transition: height 0.4s ease-in-out;
  }
  .accordion > input[type="checkbox"]:checked ~ .content { height: auto; overflow: visible; }
  .accordion label { display: block; }
  .accordion > input[type="checkbox"]:checked ~ .content {
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-top: 0;
    transition: 0.4s;
    animation: slide-out 0.4s ease-in-out;
  }
  
  .accordion label {
    cursor: pointer;
    padding: 10px 15px;
    background: #f0f0f0;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
  }
  
  .accordion label:hover,
  .accordion label:focus {
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    background: #d8d8d8;
  }
  
  .accordion .handle label:before {
    font-family: 'fontawesome';
    content: "\f054";
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    width: 15px;
    vertical-align:middle;
  }
  .accordion > input[type="checkbox"]:checked ~ .handle label:before { content: "\f078"; }
  
  /**** type 2 *****/
  .accordion-1 > input[type="checkbox"] { position: absolute;  left: -100vw; }
  .accordion-1 .content {
    overflow-y: hidden;
    height: 0;
    transition: height 0.4s ease-in-out;
    -webkit-transition: height 0.4s ease-in-out;
  }
  .accordion-1 > input[type="checkbox"]:checked ~ .content { height: auto; overflow: visible; }
  .accordion-1 label { display: block; }
  .accordion-1 > input[type="checkbox"]:checked ~ .content {
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-top: 0;
    transition: 0.4s;
    animation: slide-out 0.4s ease-in-out;
  }
  .accordion-1 label {
    cursor: pointer;
    padding: 10px 15px;
    background: #f0f0f0;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
  }
  .accordion-1 label:hover,
  .accordion-1 label:focus { transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; background: #d8d8d8; }
  .accordion-1 .handle label:before {
    font-family: 'fontawesome';
    content: "\f067";
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    width: 15px;
    vertical-align:middle;
  }
  .accordion-1 > input[type="checkbox"]:checked ~ .handle label:before { content: "\f068 "; }
  
  
  /**** type 3 ****/
  .accordion-2 > input[type="checkbox"] { position: absolute;  left: -100vw; }
  .accordion-2 .content {
    overflow-y: hidden;
    height: 0;
    transition: height 0.4s ease-in-out;
    -webkit-transition: height 0.4s ease-in-out;
  }
  .accordion-2 > input[type="checkbox"]:checked ~ .content { height: auto; overflow: visible; }
  .accordion-2 label { display: block; }
  .accordion-2 > input[type="checkbox"]:checked ~ .content {
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-top: 0;
    transition: 0.4s;
    animation: slide-out 0.4s ease-in-out;
  }
  .accordion-2 label {
    cursor: pointer;
    padding: 10px 15px;
    background: #f0f0f0;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
  }
  .accordion-2 label:hover,
  .accordion-2 label:focus { transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; background: #d8d8d8; }
  .accordion-2 .handle label:before {
    font-family: 'fontawesome';
    content: "";
  }
  .accordion-2 > input[type="checkbox"]:checked ~ .handle label:before { content: ""; }
  
  @keyframes slide-out{ 0%{ transform: translateY(-5px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; }}
  @-webkit-keyframes slide-out { 0%{ -webkit-transform: translateY(-5px); opacity: 0 } 100%{ -webkit-transform: translateY(0); opacity: 1; }}
  
  
  /**** Nav ****************************************************************************************/
  /* is it flexible? */
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
  }
  
  .nav > .active {
    background: green;
    color:#fff;
    padding: 6px 10px;
    border-radius:4px;
  }
  
  .nav-link {
    cursor: pointer;
  }
  
  .nav-vertical {
    flex-direction: column;
  }
  
  /**** Links **************************************************************************************/
  
  .hyperlink-success-line { color: #228c22; text-decoration: underline;}
  .hyperlink-danger-line { color: #eb0f0f; text-decoration: underline;}
  .hyperlink-warning-line { color: #dfca10; text-decoration: underline;}
  .hyperlink-info-line { color: #1059df; text-decoration: underline;}
  
  .hyperlink-success { color: #228c22; text-decoration: none;}
  .hyperlink-danger { color: #eb0f0f; text-decoration: none;}
  .hyperlink-warning { color: #dfca10; text-decoration: none;}
  .hyperlink-info { color: #1059df; text-decoration: none;}
  
  /**** Displays ***********************************************************************************/
  
  .d-none {display: none}
  .d-contents{display: contents}
  .d-block {display: block}
  .d-grid { display: grid;}
  .d-flex{display: flex}                /*Referenced UX-1 Item-5*/
  .d-initial{display: initial}
  .d-inherit{display: inherit}
  .d-list-item{display: list-item}
  .d-flow-root{display: flow-root}
  
  /* inline-display */
  .d-inline {display: inline}
  .d-inline-block {display: inline-block}
  .d-inline-grid{display: inline-grid}
  .d-inline-table{display: inline-table}
  .d-inline-flex{display: inline-flex}
  
  /* Table display */
  .d-table{display: table}
  .d-table-cell{display: table-cell}
  .d-table-caption{display: table-caption}
  .d-table-column{display: table-column}
  .d-table-column-g{display: table-column-group}
  .d-table-header-g{display: table-header-group}
  .d-table-footer-g{display: table-footer-group}
  .d-table-row{display: table-row}
  .d-table-row-g{display: table-row-group}
  
  /***** z-index ***********************************************************************************/
  
  .z-id-auto {z-index: auto;}
  .z-id-1 {z-index: 10;}
  .z-id-2 {z-index: 20;}
  .z-id-3 {z-index: 30;}
  .z-id-4 {z-index: 40;}
  .z-id-5 {z-index: 50;}
  .z-id-max { z-index: 99999;}
  
  /***** Tool Tip *********************************************************************************/
  
    [tooltip] { position: relative; }
    [tooltip]::before, [tooltip]::after {
      text-transform: none;
      line-height: 1;
      font-size: 0.9em;
      user-select: none;
      pointer-events: none;
      position: absolute;
      display: none;
      opacity: 0;
   }
    [tooltip]::before {
      content: '';
      border: 5px solid transparent;
      z-index: 1001;
   }
    [tooltip]::after {
      content: attr(tooltip);
      font-family: Helvetica, sans-serif;
      text-align: center;
      min-width: 3em;
      max-width: 21em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 1ch 1.5ch;
      border-radius: 0.3em;
      box-shadow: 0 1em 2em -8px rgba(0, 0, 0, .35);
      background: #353539;
      color: #fff;
      z-index: 1000;
   }
    [tooltip]:hover::before, [tooltip]:hover::after {
      display: block;
   }
    [tooltip]:not([flow])::before, [tooltip][flow^="up"]::before {
      bottom: 100%;
      border-bottom-width: 0;
      border-top-color: #353539;
   }
    [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after {
      bottom: calc(100% + 5px);
   }
    [tooltip]:not([flow])::before, [tooltip][flow^="up"]::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after {
      left: 50%;
      transform: translate(-50%, 8px);
   }
    [tooltip][flow^="down"]::before {
      top: 100%;
      border-top-width: 0;
      border-bottom-color: #353539;
   }
    [tooltip][flow^="down"]::after {
      top: calc(100% + 5px);
   }
    [tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after {
      left: 50%;
      transform: translate(-50%, -8px);
   }
    [tooltip][flow$="-left"]::after {
      right: 50%;
      left: auto;
   }
    [tooltip][flow="up-left"]::after {
      transform: translate(24px, 8px);
   }
    [tooltip][flow="down-left"]::after {
      transform: translate(24px, -8px);
   }
    [tooltip][flow="up-right"]::after {
      transform: translate(-24px, 8px);
   }
    [tooltip][flow="down-right"]::after {
      transform: translate(-24px, -8px);
   }
    [tooltip][flow="left"]::before {
      top: 50%;
      border-right-width: 0;
      border-left-color: #353539;
      left: calc(0 - 5px);
      transform: translate(8px, -50%);
   }
    [tooltip][flow="left"]::after {
      top: 50%;
      right: calc(100% + 5px);
      transform: translate(8px, -50%);
   }
    [tooltip][flow="right"]::before {
      top: 50%;
      border-left-width: 0;
      border-right-color: #353539;
      right: calc(0em - 5px);
      transform: translate(-8px, -50%);
   }
    [tooltip][flow="right"]::after {
      top: 50%;
      left: calc(100% + 5px);
      transform: translate(-8px, -50%);
   }
    [tooltip]:not([flow]):hover::before, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="down"]:hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::after {
      animation: tips-vert 150ms cubic-bezier(.5, 0, .6, 1.3) 1ms forwards;
   }
    [tooltip][flow$="-right"]:hover::after {
      animation: tips-diag-right 150ms cubic-bezier(.5, 0, .6, 1.3) 1ms forwards;
   }
    [tooltip][flow$="-left"]:hover::after {
      animation: tips-diag-left 150ms cubic-bezier(.5, 0, .6, 1.3) 1ms forwards;
   }
    [tooltip][flow="left"]:hover::before, [tooltip][flow="right"]:hover::before, [tooltip][flow="left"]:hover::after, [tooltip][flow="right"]:hover::after {
      animation: tips-horz 150ms cubic-bezier(.5, 0, .6, 1.3) 1ms forwards;
   }
    [tooltip='']::after, [tooltip='']::before {
      display: none !important;
   }
    .helper [tooltip] {
      background: #ad4375;
   }
    .helper [tooltip]::before, .helper [tooltip]::after {
      display: block;
      opacity: 0.8;
   }
  
   @keyframes tips-vert { to { opacity:0.9; transform: translate(-50%, 0); }}
   @-webkit-keyframes tips-vert { to { opacity:0.9; -webkit-transform: translate(-50%, 0); } }
   
   @keyframes tips-horz { to { opacity: 0.9; transform: translate(0, -50%); } }
   @-webkit-keyframes tips-horz { to { opacity: 0.9; -webkit-transform: translate(0, -50%); } }
  
   @keyframes tips-diag-right { to { opacity: 0.9; transform: translate(-1em, 0); } }
   @-webkit-keyframes tips-diag-right { to { opacity: 0.9; -webkit-transform: translate(-1em, 0); } }
  
   @keyframes tips-diag-left { to { opacity: 0.9; transform: translate(1em, 0); } }
   @-webkit-keyframes tips-diag-left { to { opacity: 0.9; -webkit-transform: translate(1em, 0); } }
  
    
    
  
  /******* Pop-over **************************************************************************************/
  
  details[data-popover] {
    display: inline;
    position: relative;
  }
  details[data-popover] > summary:focus {
    outline: none;
  }
  details[data-popover] > summary::-webkit-details-marker {
    display: none;
  }
  details[data-popover] > summary {
    list-style: none;
  }
  details[data-popover] > summary + * {
    position: absolute;
    display: block;
    z-index: 1;
    width: 100%;
    border: solid 1px rgb(182, 182, 182);
    border-radius: 4%;
    padding: 10px;
    background: white;
  }
  details[data-popover] > * + * {
    display: none;
  }
  details[data-popover="up"] > summary + * {
    bottom: calc(8px + 100%);
    right: 50%;
    transform: translateX(50%);
  }
  details[data-popover="down"] > summary + * {
    top: calc(8px + 100%);
    right: 50%;
    transform: translateX(50%);
  }
  details[data-popover="left"] > summary + * {
    right: calc(16px + 100%);
    bottom: 50%;
    transform: translateY(50%);
  }
  details[data-popover="right"] > summary + * {
    left: calc(16px + 100%);
    bottom: 50%;
    transform: translateY(50%);
  }
  
  /******* Modal *****************************************************************************************/
  
  .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    background:#4A5582B0;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    transition: background opacity 500ms;
  }
  
  .modal > .info-mod-l {
    background: #fff;
    max-width: 60%;
    padding: 18px 15px;
    border-radius: 4px;
    transition: background opacity 500ms;
  }
  
  .modal > .info-mod-m {
    background: #fff;
    max-width: 30%;
    padding: 18px 15px;
    border-radius: 4px;
  }
  
  .modal > .info-mod-s {
    background: #fff;
    max-width: 20%;
    padding: 18px 15px;
    border-radius: 4px;
  }
  
  @media screen and (max-width: 1200px) {
   .modal > .info-mod-l { max-width: 60%; }
   .modal > .info-mod-m { max-width: 45%; }
   .modal > .info-mod-s { max-width: 35%; }
   }
  
  @media screen and (max-width: 768px) {
   .modal > .info-mod-l { max-width: 90%; }
   .modal > .info-mod-m { max-width: 80%; }
   .modal > .info-mod-s { max-width: 70%; }
   }
  
  
  
  /***** Scroll-to-Top *******************************************************************************/
  
  .to-top {
    position: absolute;
    padding: 10px;
    bottom: 20px;
    text-decoration: none;
    border: 0.5px solid black;
    animation: slide-up 0.3s ease-in-out;
  }
  
  /* positioning */
  .to-top-left {left: 20px;}
  .to-top-right {right: 20px;}
  
  .type-1 { border-radius: 999px; background: #000000; }
  .type-2 { border-radius: 4px; background: #102bc9; }
  
  @keyframes slide-up{ 0%{ transform: translateY(-115px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; }}
  @-webkit-keyframes slide-up { 0%{ -webkit-transform: translateY(-115px); opacity: 0 } 100%{ -webkit-transform: translateY(0); opacity: 1; }}
  
  
  /****** Form(input, input-group, label) ****************************************************************/
  
  .label { display: inline-block; padding: 4px 1px;}
  .input-group-prepend {
      display: flex;
      border: 1px solid rgb(131, 129, 129);
      border-radius: 4px;
  }
  
  .input-group-append {
      display: flex;
      flex-direction: row-reverse;
      border: 1px solid rgb(131, 129, 129);
      border-radius: 4px;
  }
  
  .input-group-pre-append {
    display: flex;
    border: 1px solid rgb(131, 129, 129);
    border-radius: 4px;
  }
  
  .input-icon {
      padding: 5px 7px;
      background: #dadada;
      border-radius: 4px 2px 2px 4px;
  }
  .input-1 {
      width: 100%;
      padding:6px 4px;
      border-radius: 4px;
      border: none;
  }
  
  /* bare input */
  .input {
      width: 100%;
      padding:8px 4px;
      border-radius: 4px;
      border: 1px solid rgb(131, 129, 129);
  }
  
  .input:focus { outline: none; }
  .input-1:focus { outline: none; }
  input:disabled { cursor: not-allowed; }
  
  /**** Switch *****/
  .switch { cursor: pointer; display: inline-block; }
  
  .switch-toggle {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 52px;
    height: 26px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
  }
  .switch-toggle:before, .switch-toggle:after {
    content: "";
  }
  .switch-toggle:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 18px;
    height: 18px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
  }
  .switch:hover .switch-toggle:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  }
  
  .switch-checkbox:checked + .switch-toggle {
    background: rgb(0, 23, 128);
  }
  .switch-checkbox:checked + .switch-toggle:before {
    left: 30px;
  }
  .switch-checkbox {
    position: absolute;
    visibility: hidden;
  }
  .switch-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
  }
  
  
  /*** Checkboxes ***/
  .control {
      font-size: 18px;
      position: relative;
      display: block;
      padding-left: 30px;
      cursor: pointer;
  }
  
  .control input {
      position: absolute;
      z-index: -1;
      opacity: 0;
  }
  
  .control-indicator {
      position: absolute;
      top: 2px;
      left: 0;
      width: 20px;
      height: 20px;
      background: #e6e6e6;
  }
  
  .control--radio .control-indicator {
      border-radius: 50%;
  }
  
  
  .control:hover input ~ .control-indicator,
  .control input:focus ~ .control-indicator {
      background: #ccc;
  }
  
  .control input:checked ~ .control-indicator {
      background: #2aa1c0;
  }
  .control:hover input:not([disabled]):checked ~ .control-indicator,
  .control input:checked:focus ~ .control-indicator {
      background: #0e647d;
  }
  
  .control input:disabled ~ .control-indicator {
      cursor: not-allowed;
      opacity: .6;
      background: #e6e6e6;
  }
  
  .control-indicator:after {
      position: absolute;
      display: none;
      content: '';
  }
  
  .control input:checked ~ .control-indicator:after {
      display: block;
  }
  
  .control-checkbox .control-indicator:after {
      top: 4px;
      left: 8px;
      width: 3px;
      height: 8px;
      transform: rotate(45deg);
      border: solid #fff;
      border-width: 0 2px 2px 0;
  }
  
  .control-checkbox input:disabled ~ .control-indicator:after {
      border-color: #7b7b7b;
  }
  
  /*** Radio Buttons *****/
  
  [type="radio"]:checked,
  [type="radio"]:not(:checked) {
      position: absolute;
      left: -9999px;
  }
  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label
  {
      position: relative;
      padding-left: 28px;
      cursor: pointer;
      line-height: 20px;
      display: inline-block;
      color: #666;
  }
  [type="radio"]:checked + label:before,
  [type="radio"]:not(:checked) + label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 16px;
      height: 16px;
      border: 1px solid #ddd;
      border-radius: 100%;
      background: #fff;
  }
  
  [type="radio"]:checked + label:after,
  [type="radio"]:not(:checked) + label:after {
      content: '';
      width: 13px;
      height: 13px;
      background: #D97E4A;
      position: absolute;
      top: 2.7px;
      left:2.7px;
      border-radius: 100%;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  [type="radio"]:not(:checked) + label:after {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  [type="radio"]:checked + label:after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  
  
  [type="radio"][disabled] + label:before
   {
    cursor:not-allowed ;
  }
  
  /*** .Select  *****/
  
  .select {
    border: 1px solid #c0c0c0;
    outline: 0;
    width: 100%;
    height: 36px;
    padding: 0 4px;
    border-radius: 4px;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  .select-s { height: 20px !important; }
  .select-l { height: 48px !important; }
  
  .select option { color: inherit; }
  .select:focus { outline: none; }
  .select::-ms-expand { display: none; }
  
   /* type-2 */
  .select-2 { width: 100%; }
  .select-2 label { display: block; padding:3px 4px;}
  .select-2 select { 
    border: 1px solid #c0c0c0;
    outline: 0;
    width: 100%;
    padding: 10px 7px;
    border-radius: 4px;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  .is-invalid { border: 1px solid red;}
  select[disabled] { cursor: not-allowed; background: #f1f1f1; box-shadow: none;}
  
  /**** Alerts *****************************************************************************/
  .alert {
      padding: 18px 10px;
      border-radius: 4px;
      max-width: 250px;
      animation: slide-down 0.3s ease-in-out;
  }
  
  /* alert-positions */
  .alert-top-r{ position: absolute; top: 14px; right: 14px; }
  .alert-bottom-r{ position: absolute; bottom: 14px; right: 14px; }
  .alert-bottom-l{ position: absolute; bottom: 14px; left: 14px; }
  
  /* types */
  .alert-primary { background: #b1acda; color:#fff; }
  .alert-success { background: #228c22; color:#fff; }
  .alert-danger { background: #b22222; color:#fff; }
  .alert-warning { background: #fafad2; color:#000000; }
  
  @keyframes slide-down{
      0%{ transform: translateY(-15px); opacity: 0; }
      100%{ transform: translateY(0); opacity: 1; }
  }
  
  @-webkit-keyframes slide-down {
      0%{ -webkit-transform: translateY(-15px); opacity: 0 }
      100%{ -webkit-transform: translateY(0); opacity: 1; }
  }
  
  /******** Spinners ****************************************************************************************/
  
  /* spinner, spinner-1, spinner-2 */
  .spinner {
      display: inline-block;
      width: 24px;
      height: 24px;
      display: inline-block;
      border: 3px solid rgba(206, 201, 201, 0.3);
      border-radius: 50%;
      border-top-color: rgb(0, 0, 0);
      animation: spin 1s ease-in-out infinite;
      -webkit-animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); }}
    @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); }}
  
  .spinner-1 {
      display: inline-block;
      width: 24px;
      height: 24px;
      display: inline-block;
      border: 3px solid rgba(122, 157, 255, 0.3);
      border-radius: 50%;
      border-top-color: rgb(15, 4, 167);
      animation: spin-1 1s ease-in-out infinite;
      -webkit-animation: spin-1 1s ease-in-out infinite;
    }
    @-webkit-keyframes spin-1 {
      0% { -webkit-transform: rotate(0deg); }
      50% { -webkit-transform: rotate(360deg); }
      100% { -webkit-transform: rotate(0deg); }
    }
    
    @keyframes spin-1 {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(360deg); }
      100% { transform: rotate(0deg); }
    }
  
  .spinner-2 {
      width: 24px;
      height: 24px;
      display: inline-block;
      border: 3px solid #dddf00;
      border-top-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      animation: spin-2 1s infinite;
      -webkit-animation: spin-2 1s infinite;
    }
    
    @keyframes spin-2 {
      0% {
        transform: rotate(0);
      }
      50% {
        transform: rotate(180deg);
        border-top-color: #fcab41;
        border-bottom-color: #80ffdb;
        border-right-color: transparent;
        border-left-color: transparent;
      }
      100% { transform: rotate(360deg); }
    }
    @-webkit-keyframes spin-2 {
      0% {
          -webkit-transform: rotate(0);
        }
        50% {
          -webkit-transform: rotate(180deg);
          border-top-color: #fcab41;
          border-bottom-color: #80ffdb;
          border-right-color: transparent;
          border-left-color: transparent;
        }
        100% { transform: rotate(360deg); }
    }
  
  
  /*** Pagination *****************************************************************************************/
  
  .pagination { display: inline-block;} 
  .pagination a {
    color: black;
    float: left;
    padding: 6px 12px;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color .3s;
  }
  .pagination a.active { background-color: #004ae9; color: white;}
  .pagination a:hover:not(.active) {background-color: #ddd;}
  
  
  .pagination-rounded { display: inline-block;}
  .pagination-rounded a {
    color: black;
    float: left;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .3s;
  }
  .pagination-rounded a.active { background-color: #004ae9; color: white }
  .pagination-rounded a:hover:not(.active) {background-color: #ddd;}
  
  /*** Images ******************************************************************************************/
  
  .img-fluid { max-width: 100%; height: auto;}
  /* tn = thumbnail */
  .img-tn { max-width: 100px; height: 100px;}
  .img-tn-s { max-width: 200px; height: 200px;}
  .img-tn-m { max-width: 400px; height: 400px;}
  .img-rounded { border-radius: 99999px;}
  
  /***** Object fit ************************************************************************************/
  
  .fit-contain { object-fit: contain;}
  .fit-cover { object-fit: cover;}
  .fit-fill { object-fit: fill;}
  .fit-none { object-fit: none;}
  .fit-scale-down { object-fit: scale-down;}
  
  /****** Grid / Layout ******************************************************************************/
  
  /* Column Properties */
  .grid-col-0{ grid-template-columns: none;}
  .grid-auto-col { grid-auto-columns: auto;}
  .grid-col-1{ grid-template-columns: repeat(1, minmax(0, 1fr));}
  .grid-col-2{ grid-template-columns: repeat(2, minmax(0, 1fr));}
  .grid-col-3{ grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid-col-4{ grid-template-columns: repeat(4, minmax(0, 1fr));}
  .grid-col-5{ grid-template-columns: repeat(5, minmax(0, 1fr));}
  .grid-col-6{ grid-template-columns: repeat(6, minmax(0, 1fr));}
  .grid-col-7{ grid-template-columns: repeat(7, minmax(0, 1fr));}
  .grid-col-8{ grid-template-columns: repeat(8, minmax(0, 1fr));}
  .grid-col-9{ grid-template-columns: repeat(9, minmax(0, 1fr));}
  .grid-col-10{ grid-template-columns: repeat(10, minmax(0, 1fr));}
  
  .grid-col-auto {grid-column: auto;}	
  .grid-col-span-1 { grid-column: span 1 / span 1;}
  .grid-col-span-2 { grid-column: span 2 / span 2;}
  .grid-col-span-3 { grid-column: span 3 / span 3;}
  .grid-col-span-4 { grid-column: span 4 / span 4;}
  .grid-col-span-5 { grid-column: span 5 / span 5;}
  .grid-col-span-6 { grid-column: span 6 / span 6;}
  .grid-col-span-7 { grid-column: span 7 / span 7;}
  .grid-col-span-8 { grid-column: span 8 / span 8;}
  .grid-col-span-9 { grid-column: span 9 span 9;}
  .grid-col-span-10 { grid-column: span 10 / span 10;}
  
  /* Row Properties */
  .grid-row-0{ grid-template-rows: none;}
  .grid-auto-row { grid-auto-rows: auto;}
  .grid-row-1{ grid-template-rows: repeat(1, minmax(0, 1fr));}
  .grid-row-2{ grid-template-rows: repeat(2, minmax(0, 1fr));}
  .grid-row-3{ grid-template-rows: repeat(3, minmax(0, 1fr));}
  .grid-row-4{ grid-template-rows: repeat(4, minmax(0, 1fr));}
  .grid-row-5{ grid-template-rows: repeat(5, minmax(0, 1fr));}
  .grid-row-6{ grid-template-rows: repeat(6, minmax(0, 1fr));}
  .grid-row-7{ grid-template-rows: repeat(7, minmax(0, 1fr));}
  .grid-row-8{ grid-template-rows: repeat(8, minmax(0, 1fr));}
  .grid-row-9{ grid-template-rows: repeat(9, minmax(0, 1fr));}
  .grid-row-10{ grid-template-rows: repeat(10, minmax(0, 1fr));}
  
  .grid-row-auto {grid-row:auto;}	
  .grid-row-span-1 { grid-row:span 1 / span 1;}
  .grid-row-span-2 { grid-row:span 2 / span 2;}
  .grid-row-span-3 { grid-row:span 3 / span 3;}
  .grid-row-span-4 { grid-row:span 4 / span 4;}
  .grid-row-span-5 { grid-row:span 5 / span 5;}
  .grid-row-span-6 { grid-row:span 6 / span 6;}
  .grid-row-span-7 { grid-row:span 7 / span 7;}
  .grid-row-span-8 { grid-row:span 8 / span 8;}
  .grid-row-span-9 { grid-row:span 9 span 9;}
  .grid-row-span-10 { grid-row:span 10 / span 10;}
  
  /* gap */
  .gap-0 {gap:0}
  .gap-1 {gap:5px}
  .gap-2 {gap:10px}
  .gap-3 {gap:15px}
  .gap-4 {gap:20px}
  .gap-5 {gap:30px}
  
  .gap-row-0 {gap:0 0}
  .gap-row-1 {gap:5px 0}
  .gap-row-2 {gap:10px 0}
  .gap-row-3 {gap:15px 0}
  .gap-row-4 {gap:20px 0}
  .gap-row-5 {gap:30px 0}
  
  .gap-col-0 {gap:0 0 }
  .gap-col-1 {gap:0 5px}
  .gap-col-2 {gap:0 10px}
  .gap-col-3 {gap:0 15px}
  .gap-col-4 {gap:0 20px}
  .gap-col-5 {gap:0 30px}
  
  /* Justify-Item */
  .j-i-start { justify-items: start; }
  .j-i-start { justify-items: end; }
  .j-i-start { justify-items: center; }
  .j-i-start { justify-items: stretch; }
  
  /* justify-content */
  .j-c-start { justify-content: start; }
  .j-c-end { justify-content: end; }
  .j-c-center { justify-content: center; }
  .j-c-stretch { justify-content: stretch; }
  .j-c-around { justify-content: space-around; }
  .j-c-between { justify-content: space-between; }
  .j-c-evenly { justify-content: space-evenly;}
  
  /* align-items */
  .a-i-start { align-items: start; }
  .a-i-end { align-items: end; }
  .a-i-center { align-items: center; }
  .a-i-stretch { align-items: stretch;}
  
  /* align-content */
  .a-c-start {align-content: start; }
  .a-c-end {align-content: end; }
  .a-c-center {align-content: center; }
  .a-c-stretch {align-content: stretch; }
  .a-c-around {align-content: space-around; }
  .a-c-between {align-content: space-between; }
  .a-c-evenly {align-content: space-evenly; }
  
  /* grid-auto-flow */
  .auto-f-row {grid-auto-flow: row; }
  .auto-f-col {grid-auto-flow: column; }
  .auto-f-dense {grid-auto-flow: dense; }
  
  /****** Carousel *************************************************************************************/
  /* type-1 */
  .carousel {
    box-sizing: border-box;
    scrollbar-color: transparent transparent; 
    scrollbar-width: 0px;
  } 
  .carousel::-webkit-scrollbar { display: none; }
  .carousel__snapper::-webkit-scrollbar-track { background: transparent; }
  .carousel__snapper::-webkit-scrollbar-thumb { background: transparent; border: none }
  .carousel__snapper { -ms-overflow-style: none; }
  ol, li { list-style: none; margin: 0; padding: 0;}
  
  .carousel {
    position: relative;
    padding-top: 75%;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  
  .carousel__viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  
  .carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    background-color: rgb(46, 5, 5);
    counter-increment: item;
  }
  
  .carousel__slide:nth-child(even) { background-color: #99f; }
  .carousel__slide:before {
    content: counter(item);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-40%,70px);
    color: #fff;
  }
  
  .carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
  }
  
  @media (hover: hover) {
    .carousel__snapper {
      animation-name: tonext, snap;
      animation-timing-function: ease;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
  .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; }}
  @media (prefers-reduced-motion: reduce) { .carousel__snapper { animation-name: none; } }
  
  .carousel:hover .carousel__snapper, .carousel:focus-within .carousel__snapper { animation-name: none; }
  .carousel__navigation {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
  }
  .carousel__navigation-list,
  .carousel__navigation-item { display: inline-block;}
  
  .carousel__navigation-button {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #333;
    background-clip: content-box;
    border: 4px solid transparent;
    border-radius: 50%;
    font-size: 0;
    transition: transform 0.1s;
  }
  
  .carousel::before,
  .carousel::after,
  .carousel__prev,
  .carousel__next {
    position: absolute;
    top: 0;
    margin-top: 37%;
    width: 62px;
    height: 62px;
    transform: translateY(-50%);
    /* border-radius: 50%; */
    font-size: 0;
    outline: 0;
  }
  .carousel::before, .carousel__prev { left: -16px; }
  .carousel::after, .carousel__next { right: -16px; }
  
  .carousel::before,
  .carousel::after {
    content: '';
    z-index: 1;
    background-color: #333;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
    font-size: 40px;
    line-height: 64px;
    text-align: center;
    pointer-events: none;
  }
  .carousel::before { content: "<"; }
  .carousel::after { content: ">"; }
  
  @keyframes tonext {
    75% { left: 0; }
    95% { left: 100%; }
    98% { left: 100%; }
    99% { left: 0; }
  }
  @keyframes tostart {
    75% { left: 0; }
    95% { left: -300%; }
    98% { left: -300%; }
    99% { left: 0; }
  }
  @keyframes snap {
    96% { scroll-snap-align: center; }
    97% { scroll-snap-align: none; }
    99% { scroll-snap-align: none; }
    100% { scroll-snap-align: center; }
  }
  
  
  
  /*** type-2 ***/
  .carousel-2-wrapper {
    position: relative;
    margin: 0;
    display: grid;
    grid-template-rows: 295px 120px;
    grid-template-columns: 1fr 28px 22px 27px 19px 1fr;
    align-items: center;
    justify-items: center;
  }
  
  .carousel-btn {
    position: absolute;
    bottom: 50px !important;
    left: 0 !important;
    cursor: pointer;
    z-index: 0;
  }
  
  .carousel-2 {
    grid-row: 1 / 2;
    grid-column: 1 / 8;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 5;
    --middle: 3;
    --position: 1;
    pointer-events: none;
  }
  
  .carousel-2 > .item {
    position: absolute;
    width: 80%;
    height: 100%;
    background-color: coral;
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r)))
      translateX(calc(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
  }
  
  
  .carousel-2 > .item:nth-of-type(1) { --offset: 1; background-color: #90f1ef; }
  .carousel-2 > .item:nth-of-type(2) { --offset: 2; background-color: #ff70a6; }
  .carousel-2 > .item:nth-of-type(3) { --offset: 3; background-color: #ff9770; }
  .carousel-2 > .item:nth-of-type(4) { --offset: 4; background-color: #ffd670; }
  .carousel-2 > .item:nth-of-type(5) { --offset: 5; background-color: #e9ff70; }
  
  input:nth-of-type(1) { grid-column: 2 / 3; grid-row: 2 / 3; }
  input:nth-of-type(1):checked ~ .carousel-2 { --position: 1; }
  
  input:nth-of-type(2) { grid-column: 3 / 4; grid-row: 2 / 3; }
  input:nth-of-type(2):checked ~ .carousel-2 { --position: 2; }
  
  input:nth-of-type(3) { grid-column: 4 /5; grid-row: 2 / 3; }
  input:nth-of-type(3):checked ~ .carousel-2 { --position: 3; }
  
  input:nth-of-type(4) { grid-column: 5 / 6;  grid-row: 2 / 3; }
  input:nth-of-type(4):checked ~ .carousel-2 { --position: 4; }
  
  input:nth-of-type(5) { grid-column: 6 / 7; grid-row: 2 / 3; }
  input:nth-of-type(5):checked ~ .carousel-2 { --position: 5; }
  
  
  
  /* Filters ******************************************************************************************/
  .f-none { filter: none; }
  /* .f-url */
  .f-blur-none { filter: blur(0);}
  .f-blur { filter: blur(5px);}
  .f-blur-1 { filter: blur(10px);}
  .f-blur-2 { filter: blur(15px);}
  .f-blur-3 { filter: blur(20px);}
  .f-blur-4 { filter: blur(25px);}
  .f-blur-5 { filter: blur(30px);}
  
  .f-brigtness-none { filter: brightness(0);}
  .f-brigtness { filter: brightness(0.1);}
  .f-brigtness-1 { filter: brightness(0.2);}
  .f-brigtness-2 { filter: brightness(0.3);}
  .f-brigtness-3 { filter: brightness(0.4);}
  .f-brigtness-4 { filter: brightness(0.5);}
  .f-brigtness-5 { filter: brightness(0.6);}
  
  .f-contrast-none { filter: contrast(0);}
  .f-contrast { filter: contrast(20%);}
  .f-contrast-1 { filter: contrast(40%);}
  .f-contrast-2 { filter: contrast(60%);}
  .f-contrast-3 { filter: contrast(80%);}
  .f-contrast-4 { filter: contrast(120%);}
  .f-contrast-5 { filter: contrast(200%);}
  
  .f-drop-shadow-none {filter: drop-shadow(none);}
  .f-drop-shadow { filter: drop-shadow(16px 16px 20px rgb(122, 122, 122));}
  
  .f-grayscale-none { filter: grayscale(0);}
  .f-grayscale { filter: grayscale(10%);}
  .f-grayscale-1 { filter: grayscale(20%);}
  .f-grayscale-2 { filter: grayscale(30%);}
  .f-grayscale-3{ filter: grayscale(40%);}
  .f-grayscale-4 { filter: grayscale(50%);}
  .f-grayscale-5 { filter: grayscale(60%);}
  
  .f-hue-rotate-none { filter: hue-rotate(0deg);}
  .f-hue-rotate { filter: hue-rotate(30deg);}
  .f-hue-rotate-1 { filter: hue-rotate(60deg);}
  .f-hue-rotate-2 { filter: hue-rotate(90deg);}
  .f-hue-rotate-3 { filter: hue-rotate(120deg);}
  .f-hue-rotate-4 { filter: hue-rotate(180deg);}
  .f-hue-rotate-5 { filter: hue-rotate(360deg);}
  
  .f-invert--none { filter: invert(0%);}
  .f-invert { filter: invert(15%);}
  .f-invert-1 { filter: invert(30%);}
  .f-invert-2 { filter: invert(45%);}
  .f-invert-3 { filter: invert(60);}
  .f-invert-4 { filter: invert(75%);}
  .f-invert-5 { filter: invert(100%);}
  
  .f-opacity-none { filter: opacity(0%);}
  .f-opacity { filter: opacity(5%);}
  .f-opacity-1 { filter: opacity(10%);}
  .f-opacity-2 { filter: opacity(15%);}
  .f-opacity-3 { filter: opacity(20%);}
  .f-opacity-4 { filter: opacity(25%);}
  .f-opacity-5 { filter: opacity(30%);}
  
  .f-saturate-none { filter: saturate(0%);}
  .f-saturate { filter: saturate(10%);}
  .f-saturate-1 { filter: saturate(20%);}
  .f-saturate-2 { filter: saturate(40%);}
  .f-saturate-3 { filter: saturate(60%);}
  .f-saturate-4 { filter: saturate(80%);}
  .f-saturate-5 { filter: saturate(100%);}
  
  .f-sepia-none { filter: sepia(0%);}
  .f-sepia { filter: sepia(10%);}
  .f-sepia-1 { filter: sepia(20%);}
  .f-sepia-2 { filter: sepia(40%);}
  .f-sepia-3 { filter: sepia(60%);}
  .f-sepia-4 { filter: sepia(80%);}
  .f-sepia-5 { filter: sepia(100%);}
  
  /**** Visibilty **********************************************************************************/
  
  .visible { visibility: visible;	}
  .invisible { visibility: hidden; }
  
  /**** Alignment ***********************************************************************************/
  
  /* Text Alignment */
  .text-center {text-align: center}
  .text-left {text-align: left}
  .text-right {text-align: right}
  .text-justify {text-align: justify}
  .text-initial {text-align: initial}
  .text-end {text-align: end}
  .text-start {text-align: start}
  .text-revert {text-align: revert}
  .text-unset {text-align: unset}
    
  /* Vertical Alignment */
  .v-baseline {vertical-align: baseline}
  .v-text-top {vertical-align: text-top}
  .v-text-bottom {vertical-align: text-bottom}
  .v-sub {vertical-align: sub}
  .v-super {vertical-align: super}
  .v-top {vertical-align: top}
  .v-bottom {vertical-align: bottom}
  .v-middle {vertical-align: middle}
  
  /* Alignment baseline */
  .ab-text-after-edge {alignment-baseline : text-after-edge}
  .ab-after-edge {alignment-baseline : after-edge}
  .ab-before-edge {alignment-baseline : before-edge}
  .ab-text-before-edge {alignment-baseline : text-before-edge}
  .ab-alpha {alignment-baseline : alphabetic}
  .ab-auto {alignment-baseline : auto}
  .ab-central {alignment-baseline : central}
  .ab-hanging {alignment-baseline : hanging}
  .ab-ideographic {alignment-baseline : ideographic}
  .ab-math {alignment-baseline : mathematical}
  .ab-middle {alignment-baseline : middle}
  
  /***** Shadows *******************************************************************************/
  
  .shadow-none {box-shadow: none;}
  .shadow-none {-moz-box-shadow: none;}
  .shadow-none {-webkit-box-shadow: none;}
  
  .shadow {box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
  .shadow {-moz-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
  .shadow {-webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
  
  .shadow-1 {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
  .shadow-1 {-moz-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
  .shadow-1 {-webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
  
  .shadow-2 {box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
  .shadow-2 {-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
  .shadow-2 {-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
  
  .shadow-3 {box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;}
  .shadow-3 {-moz-box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;}
  .shadow-3 {-webkit-box-shadow : rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;}
  
  .shadow-4 {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
  .shadow-4 {-moz-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
  .shadow-4 {-webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
  
  .shadow-5 {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  .shadow-5 {-moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  .shadow-5 {-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  
  /* globals*/
  .shadow-inherit { box-shadow: inherit; }
  .shadow-initial { box-shadow: initial; }
  .shadow-unset { box-shadow: unset; }