/*
Theme Name: Ovipare
Theme URI: https://sebastien-gosselet.fr
Author: Sebastien GOSSELET
Author URI: https://sebastien-gosselet.fr
Description: Ovipare Theme
Requires at least: WordPress 5.2
Version: 1.0.1
*/



html,body{
    color:#333333;
    line-height:2rem;
    font-size:18px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    width:100%;
    max-width:100%;
}

body{
    overflow-x:hidden;
}

/* FONTS */

h1, h2, h3, h4{
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
}

img{
    max-width:100%;
}

.vh-25{
    height:25vh;
}

.vh-50{
    height:50vh;
}

.vh-75{
    min-height:75vh;
}


/* FONT-SIZE */

.big{font-size:1.5rem;font-weight:700;}

/* FONT COLORS */

.c-green{color:#02aa93 !important;}
.c-yellow{color:#ffc500 !important;}
.c-yellow-dark{color:#d0a972 !important;}
.c-white{color:white!important;}
.c-black{color:#333333 !important;}
.c-pink{color:#f75bad !important;}

/* BACKGROUND COLORS */

.b-green{background:#02aa93 !important;}
.b-green-dark{background:#1c9a8a !important;}
.b-yellow{background:#ffc500 !important;}
.b-yellow-dark{background:#d0a972 !important;}
.b-white{background:white !important;}
.b-black{background:black !important;}

/* BACKGROUND PATTERNS */
.b-green-pattern{
    background:url(assets/img/green-pattern.jpg);
}

.home-main-bg{
    background:url(assets/img/home-main-bg.jpg);
}

.b-white-pattern{
    background:url(assets/img/white-pattern.jpg);
}

/* BORDERS */

.green-borders{
    border:2px solid #02aa93;
}


/* BUTTONS */

.momotaro-btn{
    background:#ffc600 !important;
    color:#333333 !important;
    padding: 20px 50px !important;
    border:none !important;
    border-radius:80px !important;
    margin:0 auto !important;
    font-weight:bold !important;
    letter-spacing:2px !important;
    height: auto!important;
    line-height: normal !important;
    cursor:pointer;
}

.momotaro-btn:hover{
    background:#c79600;
}

.big-red-btn{
    background-image: -moz-linear-gradient( 150deg, rgb(190,6,3) 1%, rgb(236,39,36) 26%, rgb(190,6,3) 100%, rgb(184,136,52) 100%, rgb(209,132,32) 100%);
    background-image: -webkit-linear-gradient( 150deg, rgb(190,6,3) 1%, rgb(236,39,36) 26%, rgb(190,6,3) 100%, rgb(184,136,52) 100%, rgb(209,132,32) 100%);
    background-image: -ms-linear-gradient( 150deg, rgb(190,6,3) 1%, rgb(236,39,36) 26%, rgb(190,6,3) 100%, rgb(184,136,52) 100%, rgb(209,132,32) 100%);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    line-height:120px;
    text-align:center;
    height: 120px;
    width:100%;
    border-radius:120px;
    display:inline-block;
    font-size:34px;
}

/* BADGES */

.momotaro-green-badge{
    background-color:#02aa93;
    color:white;
    width: 128px;
    border-radius:60px;
    text-align:center;
    display:inline-block;
    font-size:24px;
}

.momotaro-green-badge.small{
    font-size:16px;
}

#faq .momotaro-green-badge{
    width: 180px;
    font-size:18px;
}

/* CAPSULE */

.capsule{
    height:285px;
}

.capsule img{
  height: auto;
  max-height: 130px;
}

.capsule p{
    margin-bottom: 0px;
    text-decoration: underline;
    line-height: 26px;
    margin-top: 15px;
}

/* BORDERS */

.br-10{
    border-radius:10px;
}

.br-20{
    border-radius:20px;
}

.br-20-t{
    border-radius:20px 20px 0 0;
}

.br-20-b{
    border-radius:0 0 20px 20px;
}

.stable{
    overflow:hidden;height:100%;max-height:100%;
}

::-webkit-scrollbar {
    display: none;
}


/* MARGINS */

.mt-6{margin-top:4rem;}
.mt-7{margin-top:5rem;}
.mb-6{margin-bottom:4rem;}
.mb-7{margin-bottom:5rem;}
.pt-6{padding-top:4rem;}
.pt-7{padding-top:5rem;}
.pb-6{padding-bottom:4rem;}
.pb-7{padding-bottom:5rem;}

.my-6{margin-top:7rem;margin-bottom:7rem;}
.my-7{margin-top:7rem;margin-bottom:7rem;}
.my-8{margin-top:7rem;margin-bottom:7rem;}
.my-9{margin-top:7rem;margin-bottom:7rem;}

.py-6{padding-top:4rem;padding-bottom:4rem;}
.py-7{padding-top:5rem;padding-bottom:5rem;}
.py-8{padding-top:6rem;padding-bottom:6rem;}
.py-9{padding-top:7rem;padding-bottom:7rem;}

/* MENU */

#menu{
    height:80px;
    line-height:80px;
    border-radius:0 0 20px 20px;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    position:relative;
    z-index: 4;
}

#menu .menu-clic{
    color:white;
    font-weight:bold;
}

.menu-icon{
    display:inline-block;
    height:52px;
    width:52px;
    background:#ffc600;
    border-radius:50px;
    line-height: 48px;
    cursor:pointer;
}

/* MENU OVERLAY */

.menu-overlay{
    height:100%;
    width:100%;
    background: rgba(0, 0, 0, 0.5);
    position:fixed;
    top:0;
    left:0;
    display:none;
    z-index:3;
    line-height:18px;
}

.menu-overlay.open{
    display:block;
}

.menu-popup{
    margin-top:120px;
    background:#ffffff;
    padding:60px;
    border-radius:20px;
}

.menu-popup .link{
    font-color:#333333;
    border-bottom:5px;
    padding:37px 0;
    text-align:left;
    font-weight:bold;
    position:relative;
}

.menu-popup .link:hover{
    color:#02aa93;
    cursor:pointer;
}

.menu-popup .link::after{
    content:"";
    height:1px;
    width:100%;
    background:black;
    position:absolute;
    bottom:30px;
    left:0;
}

.menu-popup .yellow-circle{
    width: 15px;
    height: 15px;
    background: #ffc600;
    border-radius: 15px;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    float: right;
    margin: 0;
    padding: 0;
    align-items: center!important;
    justify-content: center!important;
    display:flex;
}

.menu-popup a{
    color:#333333;
}

.menu-popup a:hover{
    color: #ffc600;
    text-decoration: none;
}

/* index main */

.main-image{
  cursor:pointer;
}

/* campaign */

.campaign-header{
    position:relative;
    z-index:2;
    margin-bottom:-10px;
}


.white-yellow-pattern{
    background:url('assets/img/white-yellow-pattern.jpg');
}

.green-white-pattern{
    background:url('assets/img/green-white-pattern.jpg');
    color:white;
}

.green-white-dark-pattern{
    background:url('assets/img/green-white-dark-pattern.jpg');
    color:white;
}

.or-image{
    position:absolute;
    left:-20px;
    top:40px;
    z-index: 3;
    max-width:inherit;
}

/* promise */

.custom-card{
    border:1px solid white;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 296px;
    height: 296px;
    font-size:0.9rem;
    background:white;
    position:relative;
}

.custom-card h3{
    color:#f758b2;
    font-size:32px;
    text-decoration:underline;
}

.dialog{
    background-image: -moz-linear-gradient(-180deg, rgb(255,234,0) 0%, rgb(247,88,178) 100%);
    background-image: -webkit-linear-gradient(-180deg, rgb(255,234,0) 0%, rgb(247,88,178) 100%);
    background-image: -ms-linear-gradient(-180deg, rgb(255,234,0) 0%, rgb(247,88,178) 100%);
    color:white;
    font-weight:bold;
    border-radius:5px;
    min-height:60px;
    padding:10px 20px;
    width:80%;
    margin:0 auto;
    font-size:24px;
    margin-top:-30px;
    display:flex;
    align-items:center;
    justify-content: center!important;
}

.dialog.short{
    width:auto;
    display:inline-block;
    line-height:60px;
    padding:0px 30px;
}

.dialog-sp{
    width:180px;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size:20px;
    line-height:24px;
}

.custom-card .centered-text{
    margin-top:-40px;
    font-size:24px;
    letter-spacing:1px;
}

#pickup .custom-card{
    height:355px;
}

.arrow-dialog{
    line-height:0px;
}

.dialog.small{
    font-size:18px;
}

/* green blocks */ 

.dialog-white{
    background:white;
    color:#02aa93;
}

.green-block{
    height:550px;
}

.inner-green-block{
    width:600px;
    margin:0 auto;
}

#device {
    height:420px;
    background:url("assets/img/bg-device.jpg");
}


#system .border-case{
    height:240px;
    width:240px;
    border-radius:10px; 
    display:flex;
    align-items: center!important;
    justify-content: center!important;
    text-align:center;
    color:#f758b2;
    font-size:28px;
    text-decoration:underline;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index:auto;
    background:white;
}

.yellow-corner-br::after{
    content:"";
    background:url("assets/img/corner-yellow.png");
    width:40px;
    height:40px;
    position:absolute;
    bottom:-10px;
    right:-10px;
    z-index:-1;
}

.yellow-corner-br-big::after{
    content:"";
    background:url("assets/img/corner-yellow-big.png");
    width: 60px;
    height:60px;
    position:absolute;
    bottom:-10px;
    right:-10px;
    z-index:-1;
}

.yellow-corner-br-big{
    z-index: auto;
}

.green-corners{
    position:relative;
    z-index:auto;
}

.green-corners::before{
    content:"";
    background:url("assets/img/corner-green.png");
    width:40px;
    height:40px;
    position:absolute;
    top:-10px;
    left:-10px;
    z-index:-1;
}

.green-corners::after{
    content:"";
    background:url("assets/img/corner-green-big.png");
    width:60px;
    height:60px;
    position:absolute;
    bottom:-10px;
    right:-10px;
    z-index:-1;
}

#system .container-case{
    align-items: center!important;
    justify-content: center!important;
    display: flex!important;
}

#system .custom-card{
    width:auto;
}

#system .green-circle{
    height:130px;
    width:130px;
    line-height:130px;
    font-weight:bold;
    background:#02aa93;
    color:white;
    text-align:center;
    border-radius:130px;
    position:absolute;
}

#system .dashed-line{
    position:absolute;
    height:1px;
    width:100%;
    border-top:2px dashed #02aa93;
}

#system .green-circle.start{position:absolute;left:0;top:-35px;}

#system .dashed-circle.finish{position:absolute;right:0;top:-15px;z-index:2;}

#system #step1.rounded-border{
    border:2px dashed #02aa93;
    border-left:0px;
    border-radius:60px;
}

#system .rounded-border{
    position:relative;
}

#system #step2.rounded-border{
    border:2px dashed #02aa93;
    border-right:0px;
    border-radius:60px;
    margin-top:-2px;
}

#system .rounded-border::before{
    content: "";
    position: absolute;
    background: white;
    width: 53px;
    height: 70px;
    z-index: 1;
}

#system #step2.rounded-border::after,
#system #step3.rounded-border::after,
#system #step4.rounded-border::after{
    content: "";
    position: absolute;
    background: white;
    width: 53px;
    height: 70px;
    z-index: 1;
}

#system #step1.rounded-border::before{
    left: 0px;
    bottom: -1px;
}

#system #step2.rounded-border::before{
    right: 0px;
    top: -1px;
}

#system #step2.rounded-border::after{
    right: 0px;
    bottom: -1px;
}

#system #step3.rounded-border::before{
    left: 0px;
    top: -1px;
}

#system #step3.rounded-border::after{
    left: 0px;
    bottom: -1px;
}

#system #step4.rounded-border::before{
    right: 0px;
    top: -1px;
}

#system #step4.rounded-border::after{
    right: 0px;
    bottom: -1px;
}

#system #step3.rounded-border{
    border:2px dashed #02aa93;
    border-left:0px;
    border-radius:60px;
    margin-top:-2px;
}

#system #step4.rounded-border{
    border:2px dashed #02aa93;
    border-right:0px;
    border-radius:60px;
    margin-top:-2px;
}

#system .step{
    border:2px dashed #02aa93;
    padding:5px 40px;
    background:white;
    color:#02aa93;
    border-radius: 30px;
    display:inline-block;
    font-weight:700;
    font-size:24px;
    line-height: 45px;
}

#system .step1{margin-top:-80px;}
#system .step2{margin-top:-133px;}
#system .step3{margin-top:-133px;}
#system .step4{margin-top:-133px;}

#system .green-large-block{
    border:2px solid #02aa93;
    color:white;
    font-size:20px;
    padding:20px;
}

#system .green-large-block a{
    color:white;w
    background:#02aa93;
    border-radius:30px;
    padding:2px 60px;
}

#system .dashed-circle{
    height:130px;
    width:130px;
    border:2px dashed #02aa93;
    background:white;
    border-radius:130px;
    text-align:center;
    line-height:130px;
    color:#02aa93;
    display:inline-block;
}

.case-nb{
    color:#f758b2;
    border:2px solid #f758b2;
    border-radius:5px;
    display:inline-block;
    width:36px;
    height:36px;
    text-align:center;
    background:white;
    position:relative;
    margin-bottom:-20px;
    z-index:3;
    font-weight:bold;
    line-height: 30px;
}

/* PAGES */

/* pages header */

.pages .page-header{
    font-size:24px;
    height:50vh;
    text-transform: uppercase;
}

.pages .page-header h1{
    font-size:24px;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

.pages .page-header{
    font-family: fot-tsukuardgothic-std, sans-serif;
}

/* breadcrumbs */

.breadcrumbs{
    background:#ffc600;
    border-radius:0 0 10px 10px;
    display:inline-block;
    padding:0px 10px;
    font-size:14px;
    font-weight:100;
    position: relative;
    top: -1px;
}

.breadcrumbs a{
   color:black;
}

.yellow-line{
    height:1px;
    width:100%;
    background:#ffc600;
}

/* MANAGEMENT PAGE */


/* FAQ PAGE */

.question-answer{
    position:relative;
    z-index:1;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
}


/* STANDARD */

.square{
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    line-height:1.5rem;
    color:#02aa93;
    height:200px;
    width:100%;
    align-items: center!important;
    justify-content: center!important;
    display: flex!important;
    padding:10px;
    text-align:center;
}

.underlined::before{
    content:"";
    height:1px;
    background:white;
    width:100%;
}


/* PAGE CONTENT */

.pages .content img{
  max-width:100%;
  height:auto;
}

#single-trash .content h1{
   font-size:24px;
   color:#02aa93; 
   margin-bottom:50px;
}

#single-trash .content hr{
    height:1px;
    background:#02aa93;
}

#single-trash .tag, #single-trash .material-icons{
    font-size:16px;
    color:#02aa93;
}

#single-trash h2{
    height:80px;
    font-size:20px;
    background:#02aa93;
    border-radius:5px;
    line-height:80px;
    color:white;
    text-align:left;
    padding:0 2rem;
}

#single-trash h3{
    height:60px;
    font-size:18px;
    background:#02aa93;
    border-radius:60px;
    line-height:60px;
    color:white;
    text-align:left;
    padding:0 2rem;
}

#single-trash h4{
    height:40px;
    font-size:18px;
    background:white;
    border-radius:40px;
    line-height:36px;
    color:white;
    text-align:left;
    padding:0 2rem;
    border:2px solid #02aa93;
    color:#02aa93;
}

#single-trash h5{
    font-size:16px;
    color:#02aa93;
    position:relative;
    margin-bottom:40px;
}

#single-trash h5:before{
    content:"";
    position:absolute;
    bottom:-15px;
    width:100%;
    height:2px;
    background:#02aa93;
}

#single-trash .wp-block-quote p{
    background:#e1efed;
    color:#555555;
    padding:50px;
    position:relative;
    border-radius:10px;
}

#single-trash .wp-block-quote p:before{
    content:"";
    width:29px;
    height:20px;
    position:absolute;
    font-style: italic;
    top:25px;
    left:25px;
    font-size:45px;
    background:url("assets/img/quote-start.png");
}

#single-trash .wp-block-quote p:after{
    content:"";
    width:29px;
    height:20px;
    font-style: italic;
    position:absolute;
    bottom:25px;
    right:25px;
    font-size:45px;
    background:url("assets/img/quote-end.png");
}

#single-trash .wp-block-quote cite{
    display:block;
    font-size:14px;
    color:#727272;
    text-align:right;
}


#single-trash .content ul, #single-trash ol{list-style:none;}
#single-trash .content ol{list-style: none; counter-reset:li}
#single-trash .content ol li{counter-increment:li}
#single-trash .content ul li::before{content: "•";color:#02aa93;display:inline-block;width:1em;margin-left:-1em;font-weight:bold;font-size:22px;}
#single-trash .content ol li::before{content:counter(li)"."; color:#02aa93;display:inline-block;width:1em;margin-left:-1.5em;font-weight:bold;margin-right:0.5em;}
#single-trash .next a{
    background-color: rgb(255, 198, 0);
    width: 240px;
    height: 60px;
    display:inline-block;
    border-radius:60px;
    line-height:56px;
    color:black;
}

#single-trash .back a{
    border: 2px solid #ffc600;
    width: 240px;
    height: 60px;
    color: rgb(255, 198, 0);
    display:inline-block;
    border-radius:60px;
    line-height:56px;
}

/* Trash Archive */

#archive-trash .archive h1{
    font-size:20px;
    color:#02aa93;
    position:relative;
    margin-bottom:40px;
}

#archive-trash .archive h1:after{
    content:"";
    height:2px;
    background:#02aa93;
    width:100%;
    position:absolute;
    bottom:-15px;
    left:0px;
}

#archive-trash .archive{
    border-width: 2px;
    border-color: rgb(0, 170, 148);
    border-style: solid;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 409px;
    position:relative;
    margin:0;
}

#archive-trash .hover{
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    top:0;
    left:0;
    z-index:5;
}

#archive-trash .hover-green{
    width:100%;
    height:calc(100% - 35px);
    background:#02aa93;
    color:white;
    border-radius:16px;
    z-index:2;
    opacity:80%;
    display:flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    padding:10px;
}

#archive-trash .hover-text{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100% - 35px);
    color:white;
    border-radius:16px;
    z-index:2;
    display:flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
}

#archive-trash .page-numbers{
    display:inline-block;
    background-color:white;
    border:2px solid rgb(255, 198, 0);
    color:rgb(255, 198, 0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right:25px;
}

#archive-trash .page-numbers.next, #archive-trash .page-numbers.prev{
    border:none;
}

#archive-trash .page-numbers:hover{
    background-color: rgb(255, 198, 0);
    color:white;
}

#archive-trash .page-numbers.current{
    background-color: rgb(255, 198, 0);
    color:white;
}

/* Merit */

#merit .custom-card{
    width:inherit;
}

#merit .momotaro-green-badge{
    width:inherit;
    padding: 5px 30px;
    line-height: 30px;
}

a:hover{
    color: #333333;
}

/* Archive */

.momotaro-green-badge.outline{
    border:2px solid #02aa93;
    background:transparent;
    color:#02aa93;
}

.img-wrapper img{
    width:100%;
}

/* Offers */

.form-field{
    border:2px solid #02aa93;
    border-radius:40px;
    font-size:16px;
    margin:0px;
}

.green-lines{
    background:#1c9a8a;
    color:white;
    border-radius:40px;
    padding-left:10px;
    margin-bottom:20px;
}

.light-green-lines{
    background:#def9f5;
    border-radius:5px;
    padding-left:10px;
    margin-bottom:20px;
    padding: 7px 10px;
}

.outer-lines{
    border:2px solid #1c9a8a;
    color:black;
    border-radius:40px;
    padding-left:10px;
    margin-bottom:20px;
}

.point-line::before{
    content: "•";color:#02aa93;
    display:inline-block;
    width:1em;
    margin-left:-1em;
    font-weight:bold;
    font-size:22px;
}

.form-field .label{
    border-bottom:1px solid #afddd7;
    padding-left: 0px;
}

.form-field .input input{
    border:none;
    border-bottom:1px solid #02aa93;
    border-radius:0;
}

.form-control:disabled, .form-control[readonly]{
    background:white;
}

.step{
    border:2px solid #afddd7;
    border-radius:60px;
    height:60px;
    line-height:60px;
    padding:0 50px;
    display:inline-block;
    margin-right:50px;
    color:#afddd7;
}

.step:hover{
    border:2px solid #02aa93;
    background:#02aa93;
    color:white;
    cursor:pointer;
}

.step.current{
    border:2px solid #02aa93;
    background:#02aa93;
    color:white;
}

.small-panel{
    border: 1px solid rgb(175, 221, 215);
    background-color: white;
    box-shadow: inset 0px 1px 3px 0px rgba(51, 51, 51, 0.2);
    border-radius:35px;
    padding: 0 10px;
    display:flex;
    justify-content: space-between;
}

.small-panel .number{
    margin-right:15px;
    display:inline-block
}

.small-panel .polarized-btn{
    background:#afddd7;
    border-radius:30px;
    width:25px;
    height:25px;
    line-height:15px;
    text-align:center;
    margin:0 3px;
    color:white;
    font-size:30px;
    padding: 0px;
    text-indent: 0px;
    letter-spacing: 0px;
    display:inline-block
}

.small-panel .polarized-btn.active{
    background:#02aa93;
    cursor:pointer;
}

.green-line-label{
    display:inline-block;
}

.green-line-content{
    display:inline-block;
}

.green-line-title{
    font-weight:bold;
    display:inline-block;
}

.form-field textarea{
    border:2px solid #afddd7;
    height:260px;
}

.form-field .input input:-moz-read-only { 
    background:white;
    border:none;
}

/* For Firefox */
.form-field .input input:read-only {
    background:white;
    border:none;
}

/* no outline for non-keyboard-inputs elements */
input:focus, input.form-control:focus {
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: afddd7;
    opacity: 1; /* Firefox */
  }
  
  textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: afddd7;
  }
  
  textarea::-ms-input-placeholder { /* Microsoft Edge */
    color: #afddd7;
  }

  .ui-datepicker{
      background:white;
      border:1px solid #c1c1c1;
      width:272px;
  }

  .ui-datepicker-header{
    margin:0 10px;
    border-bottom:1px solid #c1c1c1;
  }

  .ui-state-default{
      color:#333;
  }

  .ui-datepicker-calendar tr td,   .ui-datepicker-calendar th{
  width: 35px;
  text-align: center;
}

  .ui-datepicker-calendar tr td:hover{
      background:#afddd7;
      border-radius:50px;
      cursor:pointer;
  }

  .ui-datepicker-current-day{
    background:#def9f5;
    border-radius: 30px;
  }

  .ui-datepicker-header{
    display:flex;
  }

  .ui-datepicker-title{
      width:90%;
      margin-left:0px;
  }

  .ui-datepicker-prev, .ui-datepicker-next{
    margin-left:5px;
    margin-top:5px;
    color:white !important;
    width:30px;
    height:25px;
    border-radius:30px;
    line-height: 20px;
    text-align:center;
    background:#afddd7;
    cursor:pointer;
  }

  .ui-datepicker-prev:hover, .ui-datepicker-next:hover{
    background:#02aa93;
  }

  .ui-datepicker-prev{
    order:2;
  }

  .ui-datepicker-next{
    order:3;
  }



.custom-control-input:checked~.custom-control-label::before {
    color: #02aa93;
    border-color: #1c9a8a;
    background-color: #1c9a8a;
    cursor:pointer;
}

.custom-control-label::before{
    top: 0.55rem;
}

.custom-control-label::after{
    left: -1.5rem;
    top: 0.55rem;
    background: no-repeat 100%/100% 78%;
    cursor:pointer;
}

.number input{
width:25px;
border:none;
background:none;
}

.step-page-2{
    display:none;
}

.step-page-3{
    display:none;
}

.thanks{
    border-radius: 40px;
    background-color: rgb(28, 154, 138);
    width: 100%;
    color:white;
}

.home-h1 h1{
    color: #ffc600;
    font-size:14px;
}



/*********************************************************************************************************************************************************************
***********************************************************************************************************************************************s***********************
**********************************************************************************************************************************************************************
**************************************************************   MOBILE   ********************************************************************************************
**********************************************************************************************************************************************************************
**********************************************************************************************************************************************************************
**********************************************************************************************************************************************************************/


@media (max-width: 1023px) {

    .home-h1{
        display:none;
    }
    
    .custom-card .h-100{
        height:100% !important;
    }
    
    /* menu */

    .menu-text{
        display:none;
    }

    .menu-popup{
        margin-top: 120px;
        background: #ffffff;
        border-radius: 20px;
        width: auto;
        margin: 0px;
        padding: 15px;
        padding-top: 95px;
        font-size: 16px;
        line-height: 15px;
    }

    .menu-popup .link{
        padding: 11px 0;
    }
    
    .menu-popup .link::before,.menu-popup .link::after{
        content:inherit;
        display:none;
    }

    /* home */ 

    .rounded-border{
        border:none !important;
    }

    .rounded-border::before, .rounded-border::after{
        display:none;
    }

    #system .green-large-block{
        border:none;
    }

    #system .green-circle, #system .dashed-circle.finish{
        display:none;
    }

    .menu-popup{
        border-radius:0px;
    }

    .momotaro-btn{
        padding: 15px 40px !important;
        font-size:14px;
    }

    .menu-popup{
        padding-top:75px;
    }

    .menu-overlay .container{
        padding:0px;
    }


    #device{
        height:inherit;
    }

    /* archive */

    #archive-trash .archive{
        box-shadow:inherit;
        width:100%;
        margin: 0;
        height:inherit;
    }

    #single-trash .back a{
        width:49%;
    }

    #single-trash .next a{
        width:49%;
    }

    .vh-75, .vh-100{
        height:auto;
    }

    .py-5,.py-6, .py-7, .py-8, .py-9{
        padding-top:2rem;
        padding-bottom:2rem;
    }



    .form-field .input{
        margin:0px;
        padding:0px;
    }

    .step {
        border: 2px solid #afddd7;
        border-radius: 60px;
        height: 40px;
        line-height: 40px;
        padding: 0px 6px;
        display: inline-block;
        margin-right: 0px;
        width: 93px;
        font-size: 11px;
        color: #afddd7;
    }

    .step.momotaro-btn{
        width:auto;
        font-size:14px;
    }

    .point-line::before {
        content: "";
    }

    .custom-control-label::after{
        left: -1.51rem;
        top: 0.53rem;
    }

    .small-panel{
        margin: 10px 0;
    }

    .breadcrumbs{
        font-size:12px;
    }

    .thanks{
        border-radius: 20px;
    }

    .h1{
        font-size: 1.6rem;
    }

    .green-corners::after,.green-corners::before{
        display:none;
    }

    .or-image{
        display:block;
        position:initial;
        left:0px;
        top:0px;
    }

    .or-content{
        width:100% !important;
    }

    #system .step {
        width: auto;
        padding: 0 40px;
        width: auto;
        line-height: 36px;
    }

    #system .step1,
    #system .step2,
    #system .step3,
    #system .step4,
    #system .step5,
    #system .step6{
        margin-top:0px;
    }

    #system .green-large-block a{
        display:inline-block
    }

    .green-white-pattern, .green-white-dark-pattern{
        padding-bottom:50px;
    }

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

    .breadcrumbs .mr-3{
        margin-right:0.5rem !important;
    }

    /* margin top bot exception rules */ 

    .mt-6{
        margin-top:1.5rem;
    }
    .mt-7{
        margin-top:2.3rem;
    }

    .mb-6{
        margin-top:1.5rem;
    }
    .mb-7{
        margin-top:2.3rem;
    }

    .my-7{
        margin-top:2.3rem;
        margin-bottom:2.3rem;
    }

    py-9{
        padding-top:3rem;
        padding-bottom:3rem;
    }

    .custom-card .centered-text{
        margin:40px 20px !important;
        padding-bottom:30px;
    }

    .square{
        height:60px;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    }

    #pickup .custom-card{
        height:auto;
    }

    .custom-card, #system .border-case{
        margin:20px;
    }

    .arrow-dialog{
        display:none;
    }

   

    .custom-control-inline{
        display:block;
        width:100%;
    }

    .custom-card{
        width:100% !important;
    }

    .big-red-btn{
        display: block;
        height: auto;
        font-size: 18px;
        line-height: 1.5rem;
        padding: 10px;
    }

    .green-white-pattern, .white-yellow-pattern{
        width:100%;
    }

    .green-white-pattern, .green-white-dark-pattern{
        padding-bottom: 25px;
        width:100%;
    }

    .green-line-content{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .dialog.short{
        padding: 0px 15px;
    }

    .yellow-corner-br::after{
        display:none;
    } 
    
    #system .rounded-border::before{
        display:none;
    }

    .capsule{
        height:inherit;
    }
}