/* menu */
.leftMenu {margin-top: 80px;-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;transition: width 1s ease;vertical-align: middle;min-height:90%;height: auto;width:0;overflow:hidden;position: absolute;background:#ffffff;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);z-index:1031;overflow-y:auto;margin-left:-1px;}
.leftMenu.in {width: 300px;}

/* hidden boxes */
.remark-box {position: absolute;width: 0;height: 0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;vertical-align: middle;background: #FFFFFF;overflow: hidden;z-index: 1031;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px;}
.remark-box.in {width: 300px;height: 150px;margin-left: -150px;padding: 5px;}

/* search boxes */
.search-box {border-radius: 10px;border: solid 1px #000000;width: 100%;height: 100%;padding: 10px;}

/* width */
.max-w-600 {max-width: 600px !important;}
.max-w-800 {max-width: 800px;}
.max-w-1024 {max-width: 1024px;}
.min-w-50 {min-width: 70px;}
.min-w-p-20 {min-width: 20%;}
.min-w-p-75 {min-width: 75%;}
.w-250 {width: 250px;}
.w-300 {width: 300px;}
.w-p-50 {width: 50%;}
.w-p-100 {width: 100%;}

/* height */
.h-25 {height: 25px !important;}
.h-30 {height: 30px !important;}
.h-45 {height: 45px !important;}
.h-50 {height: 50px !important;}
.h-60 {height: 60px !important;}
.h-80 {height: 80px !important;}
.h-100 {height: 100px !important;}
.h-140 {height: 140px;}
.h-150 {height: 150px;}
.h-325 {height: 325px;}
.h-350 {height: 350px !important;}
.h-p-100 {height: 100%;}
.h-px-25 {height: 25px !important;}
.max-h-75 {max-height: 75px;}
.max-h-100 {max-height: 100px;}
.max-h-240 {max-height: 240px;}
.max-h-p-50 {max-height: 50% !important;}
.max-h-p-100 {max-height: 100% !important;}
.min-h-30 {min-height: 30px !important;}
.min-h-75 {min-height: 75px !important;}
.min-h-100 {min-height: 100px !important;}
.min-h-260 {min-height: 260px !important;}
.min-h-300 {min-height: 300px !important;}

/* margin */
.m-5 {margin: 5px !important;}
.m-10 {margin: 10px !important;}
.m-b-5 {margin-bottom: 5px;}
.m-b-10 {margin-bottom: 10px;}
.m-b-20 {margin-bottom: 20px;}
.m-l-5 {margin-left: 5px;}
.m-l-10 {margin-left: 10px;}
.m-l-15 {margin-left: 15px;}
.m-r-1 {margin-right: 1px;}
.m-r-5 {margin-right: 5px;}
.m-r-10 {margin-right: 10px;}
.m-t-2 {margin-top: 2px;}
.m-t-5 {margin-top: 5px;}
.m-t-8 {margin-top: 8px;}
.m-t--1 {margin-top: -1px;}
.m-t--2 {margin-top: -4px;}
.m-t--5 {margin-top: -5px !important;}
.m-t-10 {margin-top: 10px;}
.m-t--10 {margin-top: -10px;}
.m-t-12 {margin-top: 12px;}
.m-t--20 {margin-top: -33px !important;}
.m-t-20 {margin-top: 20px;}
.m-t-40 {margin-top: 40px;}
.m-t-50 {margin-top: 50px;}
.m-t-66 {margin-top: 66px;}
.m-t-w {margin-top: 90px;}

/* padding */
.p-5 {padding: 5px !important;}
.p-10 {padding: 10px !important;}
.p-15 {padding: 15px !important;}
.p-30 {padding: 30px !important;}
.p-b-10 {padding-bottom: 10px;}
.p-b-120 {padding-bottom: 120px;}
.p-b-20 {padding-bottom: 20px;}
.p-b-200 {padding-bottom: 300px;}
.p-l-0 {padding-left: 0 !important;}
.p-l-1 {padding-left: 1px !important;}
.p-l-15 {padding-left: 15px !important;}
.p-r-0 {padding-right: 0 !important;}
.p-r-1 {padding-right: 1px !important;}
.p-r-5 {padding-right: 5px !important;}
.p-r-10 {padding-right: 10px !important;}
.p-t-5 {padding-top: 5px !important;}
.p-t-10 {padding-top: 10px !important;}
.p-t-12 {padding-top: 12px !important;}
.p-t-20 {padding-top: 20px !important;}

/* heading */
h1, .h1 {font-size: 36px;}
h2, .h2 {font-size: 30px;}
h3, .h3 {font-size: 24px;}
h4, .h4 {font-size: 18px;}
h5, .h5 {font-size: 14px;}
h6, .h6 {font-size: 12px;}

/* float */
.f-l {float: left;}
.f-r {float: right;}

/* border */
.b-b-silver-2 {border-bottom: solid 2px #636464;}
.b-b-gold-2 {border-bottom: solid 2px #FFD700;}
.b-b-platinum-2 {border-bottom: solid 2px #d2b572;}
.b-f-silver-2 {border: solid 2px #636464;}
.b-f-bronze-2 {border: solid 2px #CD7F32;}
.b-f-gold-2 {border: solid 2px #FFD700;}
.b-f-platinum-2 {border: solid 2px #d2b572;}
.b-r-5 {border-radius: 5px;}
.b-r-10 {border-radius: 10px;}
.b-t-w {border-top: solid 1px #FFFFFF;}

/* font */
.f-c-b {color: #000000;}
.f-c-silver {color: #636464;}
.f-c-gold {color: #FFD700;}
.f-c-green {color: #ABFF00;}
.f-c-lg {color: #ececec;}
.f-c-platinum {color: #d2b572;}
.f-c-bronze {color: #CD7F32;}
.f-c-red {color: #F00;}
.f-c-w {color: #FFFFFF;}
.f-c-y {color: #FF0;}
.f-s-11 {font-size: 11px !important;}
.f-s-12 {font-size: 12px !important;}
.f-s-13 {font-size: 13px !important;}
.f-s-15 {font-size: 15px !important;}
.f-s-20 {font-size: 20px !important;}
.f-s-25 {font-size: 25px !important;}
.f-s-30 {font-size: 30px !important;}
.f-s-40 {font-size: 40px !important;}
.f-w-n {font-weight: normal;}

/* alert */
.member-silver {color: #636464;background-color: #f2f3f3;border: solid 1px #636464;border-radius: 0.25rem;margin-bottom: 1rem;padding: 5px;}
.member-gold {color: #FFD700;background-color: #fffcf1;border: solid 1px #ffd776;border-radius: 0.25rem;margin-bottom: 1rem;padding: 5px;}
.member-platinum {color: #d2b572;background-color: #fffcf1;border: solid 1px #d2c8a2;border-radius: 0.25rem;margin-bottom: 1rem;padding: 5px;}

/* block */
.cert {position: absolute;right: 0;margin-top: -30px;margin-right: 15px;}

/* background */
.bg-lg {background: #f5f5f5}
.bg-red {background: red;}

/* overflow */
.o-y-a {overflow-y: scroll;}

/* link */
a.accor:link {text-decoration: none;}

a.none:link {text-decoration: none;color: #000000;}

a.block:link {display: block;}

a.to-item:link {text-decoration: none;color: #000000;}
a.to-item:active {text-decoration: none;color: #000000;}
a.to-item:visited {text-decoration: none;color: #000000;}
a.to-item:hover {text-decoration: none;color: #000000;}
a.to-item:focus {text-decoration: none;color: #000000;}

a.disabled:link {pointer-events: none;color: #cccccc;}
a.disabled:active {pointer-events: none;color: #cccccc;}
a.disabled:visited {pointer-events: none;color: #cccccc;}
a.disabled:hover {pointer-events: none;color: #cccccc;}
a.disabled:focus {pointer-events: none;color: #cccccc;}

a.footer:link {display: block;color: #FFFFFF;text-decoration: none;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;}
a.footer:active {display: block;color: #FFFFFF;}
a.footer:visited {display: block;color: #FFFFFF;}
a.footer:hover {display: block;color: #FFFFFF;margin-left: 10px;font-weight: bold;}
a.footer:focus {display: block;color: #FFFFFF;}

a.accor-body:link {display: block;text-decoration: none;padding: 10px 10px 10px 10px;color: #000000;}
a.accor-body:active {display: block;text-decoration: none;padding: 10px 10px 10px 10px;color: #000000;}
a.accor-body:visited {display: block;text-decoration: none;padding: 10px 10px 10px 10px;color: #000000;}
a.accor-body:hover {display: block;text-decoration: none;padding: 10px 10px 10px 10px;color: #000000;}
a.accor-body:focus {display: block;text-decoration: none;padding: 10px 10px 10px 10px;color: #000000;}

/* button */
.btn-xs {padding: 0 5px 0 5px;}
.btn-upload-image-wrapper {position: relative;overflow: hidden;display: inline-block;}

.btn-none {border: none;background: none;}

.btn.btn-main {box-shadow: rgba(0, 0, 0, 0.2) 0 2px 1px;}
.btn.btn-open {box-shadow: rgba(0, 0, 0, 0.2) 0 2px 1px;}
.btn.btn-full {box-shadow: rgba(0, 0, 0, 0.2) 0 2px 1px;}

.btn-circle-gold {border-radius: 50%;border: solid 1px #FFD700;color: #FFD700;}
.btn-circle-platinum {border-radius: 50%;border: solid 1px #d2b572;color: #d2b572;}

.btn-check-custom + .btn {border-color: #FFFFFF !important;border-radius: 50%;color: #FFFFFF !important;width: 25px;height: 25px;padding: 0;}
.btn-check-custom + .btn > i {display: none;}

.btn-check-custom-pink + .btn {border-color: #e51c6c !important;border-radius: 50%;color: #e51c6c !important;width: 25px;height: 25px;padding: 0;}
.btn-check-custom-pink + .btn > i {display: none;}

.btn-white {background: transparent !important;border-color: #FFFFFF !important;}
.btn-white:active {background: transparent;border-color: #FFFFFF;}
.btn-white:visited {background: transparent;border-color: #FFFFFF;}
.btn-white:hover {background: transparent;border-color: #FFFFFF;}
.btn-white:focus {background: transparent;border-color: #FFFFFF;}

/* items */
.item-block {height: 325px !important;width: 100%; padding: 5px;text-align: center;overflow: hidden;}
.item-block-match {height: 360px !important;width: 100%; padding: 5px;text-align: center;overflow: hidden;}
.item-block-img {display: block;align-content: center;vertical-align: center;width: 100%;max-height: 60%;margin-bottom: 5px;}
.item-block-title {font-weight: bold;height: 50px;overflow: hidden;vertical-align: center;}
.item-block-info {width: 100%;overflow: hidden;height: 25px;}
.item-block:hover, .item-block-match:hover {-webkit-transition: all 1s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;border-radius: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

/* dropdown */
.dropdown-menu li {position: relative;}
.dropdown-menu .dropdown-submenu {display: none;position: absolute;left: 100%;top: -7px;}
.dropdown-menu .dropdown-submenu-left {right: 100%;left: auto;}
.dropdown-menu > li:hover > .dropdown-submenu {display: block;}

/* alignment */
.vertical-center {min-height: 100%;min-height: 100vh;display: flex;align-items: center;}
.vertical-center-90 {min-height: 90%;min-height: 90vh;display: flex;align-items: center;}

/* position */
.p-a {position: absolute;}
.p-r {position: relative;}
.top {z-index: 2;position: absolute;}
.left-top {position: absolute;}
.right-top {position: absolute;float: right;}
.z-i-1031 {z-index: 1031;}

/* transition */
.fade-out {-webkit-transition: 1s ease;-moz-transition: 1s ease;-o-transition: 1s ease;transition: 1s ease;opacity: 0;}
.fade-out.in {opacity: 1;}

/* accordion */
.accordion-button .no-chevron  {background-image: none !important;}
a.accordion-button::after {background-image: none !important;}

/* card */
.card-green {background: #287d5f !important;}

/* textarea */
textarea.no-resize {resize: none;}

/* input */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number] {-moz-appearance: textfield;}

.btn-upload-image-wrapper input[type=file] {position: absolute;left: 0;top: 0;opacity: 0;width: 200px;height: 200px;cursor: pointer;}

/* display */
.display-hidden {display: none;}
.display-hidden.in {display: revert;}

/* switch */
.switch {position: relative;display: inline-block;width: 50px;height: 25px;}
.switch input {display: none;}
.slider {position: absolute;cursor: pointer;background: #af0007;top: 0;left: 0;right: 0;bottom: 0;-webkit-transition: .4s;transition: .4s;border-radius: 34px;}
.slider:before {position: absolute;content: "";height: 23px;width: 23px;top: 1px;left: 1px;bottom: 1px;background: #FFFFFF;-webkit-transition: .4s;transition: .4s;border-radius: 50%;}
input.switch:checked + .slider {background: #ABFF00;}
input.switch:focus + .slider {box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {-ms-transform: translateX(25px);transform: translateX(25px);}

/* range slider */
.range-container {width: 100%;height: 50px;}
.range-input {position: absolute;}
.range-abs-2 {position: absolute;z-index: 1;}
.range-abs-2 {position: absolute;z-index: 1;}

/* form validation */
.has-feedback {position: relative;}
.has-feedback .form-control {padding-right: 42.5px;}
.form-control-feedback {margin-right: 15px;margin-top: 2px;position: absolute;top: 0;right: 0;z-index: 2;display: block;width: 34px;height: 34px;line-height: 34px;text-align: center;pointer-events: none;}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {width: 46px;height: 46px;line-height: 46px;}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {width: 30px;height: 30px;line-height: 30px;}
.has-success .help-block,
.has-success .form-label,
.has-success .col-form-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {color: #3c763d;}
.has-success .form-control {border-color: #3c763d;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
.has-success .form-control:focus {border-color: #2b542c;box-shadow: 0 0 0 0.25rem rgba(103, 177, 104, 0.5);-webkit-box-shadow: 0 0 0 0.25rem rgba(103, 177, 104, 0.5);}
.has-success .input-group-addon {color: #3c763d;background-color: #dff0d8;border-color: #3c763d;}
.has-success .form-control-feedback {color: #3c763d;}
.has-warning .help-block,
.has-warning .form-label,
.has-warning .col-form-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {color: #8a6d3b;}
.has-warning .form-control {border-color: #8a6d3b;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
.has-warning .form-control:focus {border-color: #66512c;box-shadow: 0 0 0 0.25rem rgba(192, 161, 107, 0.5);-webkit-box-shadow: 0 0 0 0.25rem rgba(192, 161, 107, 0.5);}
.has-warning .input-group-addon {color: #8a6d3b;background-color: #fcf8e3;border-color: #8a6d3b;}
.has-warning .form-control-feedback {color: #8a6d3b;}
.has-error .help-block,
.has-error .form-label,
.has-error .col-form-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {color: #a94442;}
.has-error .form-control {border-color: #a94442;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
.has-error .form-control:focus {border-color: #843534;box-shadow: 0 0 0 0.25rem rgba(206, 132, 131, 0.5);-webkit-box-shadow: 0 0 0 0.25rem rgba(206, 132, 131, 0.5);}
.has-error .input-group-addon {color: #a94442;background-color: #f2dede;border-color: #a94442;}
.has-error .form-control-feedback {color: #a94442;}
.has-error .form-control-feedback {top: 5px;}
.has-feedback label ~ .form-control-feedback {top: 31px;}
.has-feedback label.visually-hidden ~ input.form-control-sm ~ .form-control-feedback {top: 5px;}
/*.has-feedback label.form-label ~ input.form-control-sm ~ .form-control-feedback {top: 35px;}*/
/*.has-feedback label.col-form-label ~ input.form-control-sm ~ .form-control-feedback {top: 35px;}*/
/*.has-feedback label.visually-hidden ~ .form-control-feedback {top: 0;}*/
/*.has-feedback label.visually-hidden ~ input.form-control-sm ~ .form-control-feedback {margin-top: -2px;}*/
/*.has-feedback label.col-form-label ~ input.form-control-sm ~ .form-control-feedback {margin-top: -2px;}*/
/*.row.has-feedback input.form-control-sm ~ .form-control-feedback {margin-top: -2px;}*/

/* various */
.order-button {float: left;}

/* led light */
.led-green {margin:0 auto;width:15px;height:15px;background-color:#ABFF00;border-radius:50%;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;}
.led-blue {margin:0 auto;width:15px;height:15px;background-color:#24E0FF;border-radius:50%;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 12px;}
.led-red {margin: 0 auto;width: 15px;height: 15px;background-color: #F00;border-radius: 50%;box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;-webkit-animation:blinkRed 2s infinite;-moz-animation:blinkRed 2s infinite;-ms-animation:blinkRed 2s infinite;-o-animation:blinkRed 2s infinite;animation:blinkRed 2s infinite;}
@-webkit-keyframes blinkRed {
    from {background-color: #F00;}
    50% {background-color: #A00;box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to {background-color: #F00;}
}
@-moz-keyframes blinkRed {
    from {background-color: #F00;}
    50% {background-color: #A00;box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to {background-color: #F00;}
}
@-ms-keyframes blinkRed {
    from {background-color: #F00;}
    50% {background-color: #A00;box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to {background-color: #F00;}
}
@-o-keyframes blinkRed {
    from {background-color: #F00;}
    50% {background-color: #A00;box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to {background-color: #F00;}
}
@keyframes blinkRed {
    from {background-color: #F00;}
    50% {background-color: #A00;box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to {background-color: #F00;}
}
.led-yellow {margin:0 auto;width:15px;height:15px;background-color:#FF0;border-radius:50%;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px;-webkit-animation:blinkYellow 2s infinite;-moz-animation:blinkYellow 2s infinite;-ms-animation:blinkYellow 2s infinite;-o-animation:blinkYellow 2s infinite;animation:blinkYellow 2s infinite;}
@-webkit-keyframes blinkYellow {
    from {background-color:#FF0;}
    50% {background-color:#AA0;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0;}
    to {background-color:#FF0;}
}
@-moz-keyframes blinkYellow {
    from {background-color:#FF0;}
    50% {background-color:#AA0;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0;}
    to {background-color:#FF0;}
}
@-ms-keyframes blinkYellow {
    from {background-color:#FF0;}
    50% {background-color:#AA0;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0;}
    to {background-color:#FF0;}
}
@-o-keyframes blinkYellow {
    from {background-color:#FF0;}
    50% {background-color:#AA0;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0;}
    to {background-color:#FF0;}
}
@keyframes blinkYellow {
    from {background-color:#FF0;}
    50% {background-color:#AA0;box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0;}
    to {background-color:#FF0;}
}

@media (min-width: 576px) {
    .web {display: revert;}
    .mobile {display: none;}
}

@media (max-width: 576px) {
    .web {display: none;}
    .mobile {display: revert;}
}

/* google ads */
@media (max-width: 576px) {
    .adblock {width: 100%;margin-bottom: 20px;}
    .mobile-hide {display: none;}
}
@media (min-width: 576px) {
    .adblock {max-width: 1024px;margin-bottom: 20px;}
}

/* on scroll animate div */
.ease-out {-webkit-transition: 1s ease;-moz-transition: 1s ease;-o-transition: 1s ease;transition: 1s ease;width: 0;height: 0;margin-left: 50%;margin-top: 100px;overflow: hidden;}
.ease-out.in {width: 100%;height: 100%;margin-left: 0;margin-top: 0;}

.text-top-fade-out {-webkit-transition: 1s ease;-moz-transition: 1s ease;-o-transition: 1s ease;transition: 1s ease;opacity: 0;margin-top: -100px;overflow: hidden;}
.text-top-fade-out.in {opacity: 1;margin-top: 0;}

.text-bottom-fade-out {-webkit-transition: 1s ease;-moz-transition: 1s ease;-o-transition: 1s ease;transition: 1s ease;opacity: 0;margin-top: 100px;overflow: hidden;}
.text-bottom-fade-out.in {opacity: 1;margin-top: 0;}

.text-left-fade-out {-webkit-transition: 1s ease;-moz-transition: 1s ease;-o-transition: 1s ease;transition: 1s ease;opacity: 0;margin-left: -100px;overflow: hidden;}
.text-left-fade-out.in {opacity: 1;margin-left: 0;}

.text-right-fade-out {-webkit-transition: 1s ease;-moz-transition: 1s ease;-o-transition: 1s ease;transition: 1s ease;opacity: 0;margin-left: 100px;overflow: hidden;}
.text-right-fade-out.in {opacity: 1;margin-left: revert;}

/* calendar */
.calendar {height: max-content;width: 100%;border-radius: 30px;position: relative;overflow: hidden;}
.calendar-header {display: flex;justify-content: space-between;align-items: center;font-size: 25px;font-weight: 600;}
.month-picker {padding: 5px 10px;border-radius: 10px;cursor: pointer;}
.year-picker {display: flex;align-items: center;}
.year-change {height: 40px;width: 40px;border-radius: 50%;display: grid;place-items: center;margin: 0 10px;cursor: pointer;padding-top: 15px;}
.calendar-body {}
.calendar-week-day {height: 50px;display: grid;grid-template-columns: repeat(7, 1fr);font-weight: 600;}
.calendar-week-day div {display: grid;place-items: center;}
.calendar-days {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;}
.calendar-days div {width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;padding: 5px;position: relative;cursor: pointer;animation: to-top 1s forwards;}
.calendar-days div:hover {background-color: #f2f4f9;border-radius: 10px;transition: background-color 0.3s ease;}
.calendar-days div span {position: absolute;}
.calendar-days div.curr-date span {display: none;}
.month-list {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: #FFFFFF;padding: 20px;grid-template-columns: repeat(3, auto);gap: 5px;display: grid;transform: scale(1.5);visibility: hidden;pointer-events: none;}
.month-list.show {transform: scale(1);visibility: visible;pointer-events: visible;transition: all 0.2s ease-in-out;max-width: 100%;}
.month-list > div {display: grid;place-items: center;}
.month-list > div > div {width: 100%;padding: 5px 20px;border-radius: 10px;text-align: center;cursor: pointer;}
.month-list > div > div:hover {background-color: #f2f4f9;}

.main-footer {background: #333333;min-height: 300px;color: #FFFFFF;}