/* ------Padding----------- */
.p-0 {padding: 0 ;}
.p-5 {padding: 5px ;}
.p-10 {padding: 10px ;}
.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 ;}
.mt-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-auto {margin-top: auto ;}
.mb-0 {margin-bottom: 0 ;}
.mb-5 {margin-bottom: 5px ;}
.mb-10 {margin-bottom: 10px ;}
.mb-15 {margin-bottom: 15px ;}
.mb-16 {margin-bottom: 16px ;}
.mb-20 {margin-bottom: 20px ;}
.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% !important;}


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

/* -----Height------- */
.h-25 { height: 25px !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;}

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

.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;}              /*fw represent font-weight*/
.fw-200 {font-weight: 200;}       
.fw-300 {font-weight: 300;}          
.fw-400 {font-weight: 400;}          /* Normal font*/
.fw-500 {font-weight: 500;}     
.fw-600 {font-weight: 600;}         
.fw-700 {font-weight: 700;}         /* Bold Font*/
.fw-800 {font-weight: 800;}   
.fw-900 {font-weight: 900;}   

/* 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;}
.text-center {text-align: center;}
.text-justify {text-align: justify; display:inline;}
.text-lowercase {text-transform: lowercase; display:inline;}
.text-uppercase {text-transform: uppercase; display:inline;}
.text-capitalizer, .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-primary {
    color: #1890ff !important;
}
.text-success {
    color: #0be881 !important;
}
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;}

/* --------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:#000000b0;
  position: fixed;
  top:0;
  left:0;
  opacity: 0.7;
  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;
}

.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; }