.width-full{
    width: 100% !important;
}
.wifth-fit {
    width: fit-content !important;
    flex: unset !important;
}
.height-full{
    height: 100% !important;
}

.non-show{
    display: none !important;
}

.hiddendiv {
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-top: 1.2rem;
    position: absolute;
    top: 0;
    z-index: -1;
}
.base-col{
    color: var(--base-mdd-color);
}
.non-show.f-row{
    display: none !important;
}

.non-show.f-col{
    display: none !important;
}

/*display flex class*/
.f-row{
    display: flex !important;
    flex-direction: row !important;
}

.f-col{
    display: flex !important;
    flex-direction: column !important;
}

.jc-c{
    justify-content: center;
}

.jc-fs{
    justify-content: flex-start;
}

.jc-fe{
    justify-content: flex-end;
}

.jc-sb{
    justify-content: space-between;
}

.jc-sa{
    justify-content: space-around;
}

.jc-se{
    justify-content: space-evenly;
}

.ai-c{
    align-items: center;
}

.ai-fs{
    align-items: flex-start;
}

.ai-fe{
    align-items: flex-end;
}

.ai-s{
    align-items: stretch;
}

.ai-b{
    align-items: baseline;
}

.ac-c{
    align-content: center;
}

.ac-fs{
    align-content: flex-start;
}

.ac-fe{
    align-content: flex-end;
}

.ac-sa{
    align-content: space-around;
}

.ac-sb{
    align-content: space-between;
}

.ac-s{
    align-content: stretch;
}

.p-r{
    position: relative;
}

.p-a{
    position: absolute;
}

.p-sk{
    position: sticky;
}

.t-0{
    top : 0;
}

.b-0{
    bottom : 0;
}

.l-0{
    left: 0;
}

.r-0{
    right: 0;
}

.to-e{
    text-overflow: ellipsis;
}

.ws-nw{
    white-space: nowrap;
}
.nowrap{
	white-space: nowrap;
}
.nomargin{
	margin:0;
}
.p-t-10{
    padding-top: 10px;
}

.p-b-10{
    padding-bottom: 10px;
}

.p-l-10{
    padding-left: 10px;
}

.p-r-10{
    padding-right: 10px;
}

.p-10{
    padding: 10px;
}
.p-20{
    padding: 20px;
}
.p-30{
    padding: 30px;
}

.m-t-10{
    margin-top: 10px;
}

.m-b-10{
    margin-bottom: 10px;
}

.m-l-10{
    margin-left: 10px;
}

.m-r-10{
    margin-right: 10px;
}

.m-10{
    margin: 10px;
}

.fw-w{
    flex-wrap: wrap;
}
.is-mob {
    display: none !important;
}
.f-1 {
    flex: 0.1 !important;
}
.f-2 {
    flex: 0.2 !important;
}
.f-3 {
    flex: 0.3 !important;
}
.f-4 {
    flex: 0.4 !important;
}
.f-5 {
    flex: 0.5 !important;
}
.f-6 {
    flex: 0.6 !important;
}
.f-7 {
    flex: 0.7 !important;
}
.f-8 {
    flex: 0.8 !important;
}
.f-9 {
    flex: 0.9 !important;
}
.f-10 {
    flex: 1 !important;
}

.pore {
    position: relative !important;
}
.over-h {
    overflow: hidden;
}
.over-scroll {
    overflow: auto;
}
.f-col {
    display: inline-flex !important;
    flex-direction: column;
}
.f-row {
    display: inline-flex !important;
    flex-direction: row;
}
.r-f-row {
    display: inline-flex;
    flex-direction: row-reverse;
}
.a-ic {
    align-items: center !important;
}
.a-sc{
    align-self: center !important; 
}
.j-fs {
    justify-content: flex-start !important;
}
.j-c {
    justify-content: center !important;
}
.j-fe {
    justify-content: flex-end !important;
}
.j-sb {
    justify-content: space-between;
}
.j-sa {
    justify-content: space-around;
}
.a-fs {
    align-items: flex-start !important;
}
.a-fe {
    align-items: flex-end;
}
.f-w {
    flex-wrap: wrap;
}
.width-full {
    width: 100% !important;
}
.non-show {
    display: none !important;
}
.full-height{
    min-height: 100vh;
}
.height-full {
    height: 100% !important;
}
.m-tb-large {
    margin-top: 80px;
    margin-bottom: 80px;
}
.m-tb-small {
    margin-top: 20px;
    margin-bottom: 20px;
}
.no-margin {
    margin: 0 !important;
}
.m-t-80 {
    margin-top: 80px !important;
}
.max-width {
    width: var(--max-width) !important;
}
.p-0 {
    padding: 0 !important;
}
.min-height-full {
    min-height: 100vh !important;
}
.min-height-94{
    min-height: 94vh !important;
}
.non-padding {
    padding: 0 !important;
}
.font-b {
    font-weight: bold !important;
}
.small-font {
    font-size: 0.8rem;
}
.pointer {
    cursor: pointer;
}
.sticky {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    transform: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.sticky-b{
    position: sticky;
    bottom: 0;
}
.mob-col {}
.p-20 {
    padding: 20px;
}
[type="radio"]:checked+label:after,
[type="radio"].with-gap:checked+label:before,
[type="radio"].with-gap:checked+label:after {
    border: 2px solid #039be5;
    border-radius: 100%;
}
[type="radio"]:checked+label:after,
[type="radio"].with-gap:checked+label:after {
    background-color: #039be5;
    border-radius: 100%;
}
.switch label input[type=checkbox]:checked + .lever {
    background-color: #76caf4;
}
[type="checkbox"].filled-in:checked + span:not(.lever):after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #039be5;
    background-color: #039be5;
    z-index: 0;
}
.switch label input[type=checkbox]:checked + .lever:after {
    background-color: #039be5;
}

.p-0 {
    padding: 0 !important;
}
.gap-box {
    height: 40px;
}
.gap-1 {
    gap: 10px;
}
.gap-2 {
    gap: 20px;
}
.gap-3 {
    gap: 30px;
}
.gap-4 {
    gap: 40px;
}
.gap-5 {
    gap: 50px;
}
.pad-1 {
    padding: 10px 0;
}
.pad-2 {
    padding: 20px 0;
}
.pad-3 {
    padding: 30px 0;
}
.pad-4 {
    padding: 20px 0;
}
.g-col-2 {
    display: grid;
    grid-template-rows: repeat(2,1fr);
}
.g-col-3 {
    display: grid;
    grid-template-rows: repeat(3,1fr);
}
.g-col-4 {
    display: grid;
    grid-template-rows: repeat(4,1fr);
}
.g-col-5 {
    display: grid;
    grid-template-rows: repeat(5,1fr);
}
.g-col-6 {
    display: grid;
    grid-template-rows: repeat(6,1fr);
}
.g-row-1{
    display: grid;
    grid-template-columns: 1fr !important;
}
.g-row-2 {
    display: grid;
    grid-template-columns: repeat(2,140px) !important;
}
.g-row-3 {
    display: grid;
    grid-template-columns: repeat(3,140px) !important;
}
.g-row-f-3 {
    display: grid;
    grid-template-columns: repeat(4,1fr) !important;
}
.g-row-f-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr) !important;
}
.g-row-4 {
    display: grid;
    grid-template-columns: repeat(4,140px) !important;
}
.g-row-5 {
    display: grid;
    grid-template-columns: repeat(5,140px) !important;
}
.g-row-6 {
    display: grid;
    grid-template-columns: repeat(6,140px) !important;
}
.g-row-7 {
    display: grid;
    grid-template-columns: repeat(7,140px) !important;
}
.g-row-8 {
    display: grid;
    grid-template-columns: repeat(8,140px) !important;
}
.g-row-9 {
    display: grid;
    grid-template-columns: repeat(9,140px) !important;
}
.g-row-10 {
    display: grid;
    grid-template-columns: repeat(10,140px) !important;
}
.g-row-11 {
    display: grid;
    grid-template-columns: repeat(11,140px) !important;
}
.g-row-12 {
    display: grid;
    grid-template-columns: repeat(12,140px) !important;
}
.non-radius {
    border-radius: unset !important;
}
.mdd-auto-show-trigger{
	opacity:0;
    /* color: var(--Grayscale-30); */
    color: var(--white);
}
.mdd-scroll-box{
    position: relative;
    width: 0;
    box-sizing: border-box;
    flex: 1;
    object-fit: contain;
    border-radius: 14px;
    min-height: 300px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: all .26s;
}
.mdd-scroll-box * {
    white-space: nowrap;
}
.scroll-content{
    background: #6969690a;
    flex: 1;
    object-fit: contain;
    border-radius: 14px;
    height: 300px;
} 
.notice-text {
    color: darkred;
    margin: 10px 0;
}

.show-content{
	background: #6969690a;
    flex: 1;
    border-radius: 14px;
    height: 300px;
    transform: translateY(50px);
    opacity: 0;
    color: white;
    padding: 10px;
    box-sizing: border-box;
}
.disable{
    color: var(--Grayscale-50) !important;
    text-shadow: unset !important;
}
.mdd-auto-show-trigger.f1,
.show-content.f1{
	animation: f-up .65s cubic-bezier(0.41, 0.59, 0.56, 0.97) alternate forwards;
}
.mdd-auto-show-trigger.f2,
.show-content.f2{
	animation: f-up .65s .25s cubic-bezier(0.41, 0.59, 0.56, 0.97) alternate forwards;
}
.mdd-auto-show-trigger.f3,
.show-content.f3{
	animation: f-up .65s .4s cubic-bezier(0.41, 0.59, 0.56, 0.97) alternate forwards;
}
.mdd-auto-show-trigger.f4,
.show-content.f4{
	/* flex:0;
	transform: translateY(0px); */
	animation: f-up .65s .75s cubic-bezier(0.41, 0.59, 0.56, 0.97) alternate forwards;
}
.mdd-auto-show-trigger.f5,
.show-content.f5{
	flex:0;
	transform: translateY(0px);
	animation: f-unfold .65s 1s cubic-bezier(0.41, 0.59, 0.56, 0.97) alternate forwards;
}
.mdd-auto-show-trigger.f6,
.show-content.f6{
	flex:0;
	transform: translateY(0px);
	animation: f-unfold .65s 1.2s cubic-bezier(0.41, 0.59, 0.56, 0.97) alternate forwards;
}
.imp-text{
	color: var(--Blue-40);
}
.imp-text-2{
	color: var(--Aqua-30);
}
.imp-text-3{
	color: var(--Brown-50);
}
.no-wrap{
    white-space: nowrap;
}
.title-btn-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bg-black{
    background: var(--Grayscale-100);
}
.black-text{
    color: var(--Grayscale-100);
}
.bg-shadow::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #00000038;
    backdrop-filter: blur(2px) saturate(0.5);
}
.material-tooltip {
    padding: 5px 8px;
    font-size: 1rem;
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 2px;
    color: #fff;
    min-height: 36px;
    line-height: 120%;
    opacity: 0;
    position: absolute;
    text-align: center;
    max-width: calc(100% - 4px);
    overflow: hidden;
    left: 0;
    top: 0;
    border-radius: 4px;
    pointer-events: none;
    visibility: hidden;
    background-color: #323232;
}
@keyframes f-up {
  from {
  	opacity:0;
      transform: translateY(50px);
  }
  to {
  	opacity:1;
      transform: translateY(0px);
  }
}
@keyframes f-unfold {
  from {
  	opacity:0;
      
      flex:0;
  }
  to {
  	opacity:1;
      flex:1;
  }
}

@media (max-width: 1000px) {
    .mob-col {
        flex-direction: column !important;
    }
    .mob-r-col {
        flex-direction: column-reverse;
    }
    .mon-sb {
        width: 100%;
        justify-content: space-around !important;
    }
    .g-row-6 {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .g-row-f-3 ,.g-row-f-4 {
        display: grid;
        grid-template-columns: repeat(1,1fr) !important;
    }
}

.c-red{
	color:red;
}