/**************** FORM TAGS ****************//**************** FORM TAGS ****************//**************** FORM TAGS ****************/

input, textarea, select {
    display: block; height: 54px; font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0px;
    color: var(--black); background: var(--white); border: solid 1px; border-color: var(--br-grey); border-radius: 9px; 
    box-sizing: border-box; outline: none; transition: border-color ease 240ms;
}
input {padding: 3px 12px 3px 12px;}
select {padding: 3px 3px 3px 9px;}
option {font-weight: 400; color: var(--black); background: var(--white);}

.textarea {border: solid 1px var(--br-grey); border-radius: 9px; box-sizing: border-box; overflow: hidden;}
.textarea textarea {height: 122px; padding: 6px 12px 6px 12px; border: none !important; white-space: normal; overflow-y: auto; resize: none;}
.textarea textarea.big-text {height: 232px;}

input:hover, textarea:hover, select:hover {border-color: var(--br-grey-dark);}

input::-webkit-input-placeholder {color: hsla(0,0%,72%,1); -webkit-text-fill-color: hsla(0,0%,72%,1); text-shadow: none; transition: all linear 60ms;}
input:-moz-placeholder {color: hsla(0,0%,72%,1); -webkit-text-fill-color: hsla(0,0%,72%,1); text-shadow: none; transition: all linear 60ms;}
input::-moz-placeholder {color: hsla(0,0%,72%,1); -webkit-text-fill-color: hsla(0,0%,72%,1); text-shadow: none; transition: all linear 60ms;}
input:focus::-webkit-input-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
input:focus:-moz-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
input:focus::-moz-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}

textarea::-webkit-input-placeholder {color: hsla(0,0%,72%,1); -webkit-text-fill-color: hsla(0,0%,72%,1); text-shadow: none; transition: all linear 60ms;}
textarea:-moz-placeholder {color: hsla(0,0%,72%,1); -webkit-text-fill-color: hsla(0,0%,72%,1); text-shadow: none; transition: all linear 60ms;}
textarea::-moz-placeholder {color: hsla(0,0%,72%,1); -webkit-text-fill-color: hsla(0,0%,72%,1); text-shadow: none; transition: all linear 60ms;}
textarea:focus::-webkit-input-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
textarea:focus:-moz-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
textarea:focus::-moz-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}


/**************** FORM CLASSES ****************//**************** FORM CLASSES ****************//**************** FORM CLASSES ****************/

.form {padding: 12px 12px 12px 12px;}
.form .fitem {width: 100%; padding: 12px 12px 12px 12px;}
.form .fitem input, .form .fitem textarea, .form .fitem select {display: block; width: 100%;}

.form .fitem legend {
    min-width: 6px; min-height: 18px; margin: -3px 0px 6px 0px;
    font-weight: 800; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 1px; color: var(--black);
}
.form .fitem legend.big {margin: -6px 0px 12px 0px; font-weight: 700; font-size: 16px; line-height: 22px; text-transform: inherit; letter-spacing: 0px;}

.form .fitem q {display: block; width: 100%; margin: 5px 0px -5px 0px; font-size: 12px; line-height: 18px; color: var(--grey);}
.form .fitem q.ok {color: var(--green);}
.form .fitem q.error {color: var(--red);}

.form .fitem .fibox.text-view {pointer-events: none;}
.form .fitem .fibox.text-view input {font-weight: 700; font-size: 20px; text-align: center; background: var(--bg-grey-light); border: none;}

.form .fitem .fdate .day {width: 22%;}
.form .fitem .fdate .month {width: 42%; margin: 0px 3% 0px 3%;}
.form .fitem .fdate .year {width: 30%;}

.form .fitem.w50 {width: 50%;}

.form .fitem.focus legend {color: var(--main);}
.form .fitem.focus input, .form .fitem.focus .textarea, .form .fitem.focus select {border-color: var(--br-main);}

.form .fitem.error legend {color: var(--red);}
.form .fitem.error input, .form .fitem.error textarea, .form .fitem.error .textarea, .form .fitem.error select {border-color: var(--br-red);}

.form .fwarning {
    display: none; margin: 12px 12px 12px 12px; padding: 12px 12px 0px 12px;
    font-weight: 700; font-size: 16px; line-height: 22px; text-align: center;
    color: var(--black); background-color: var(--bg-grey); border-radius: 9px;
}
.form .fwarning.show {display: block;}
.form .fwarning p {padding: 0px 0px 12px 0px;}

.form .ferror {display: none; padding: 12px 12px 0px 12px; font-weight: 700; font-size: 16px; line-height: 22px; text-align: center; color: var(--red);}
.form .ferror p {padding: 0px 0px 12px 0px;}

.form .fborder {width: calc(100% - 24px); height: 0px; margin: 12px 12px 12px 12px; border-bottom: solid 1px var(--br-grey);}
.form .fborder.dashed {border-bottom: dashed 1px var(--br-grey);}

.form .flbox {width: 100%; padding: 9px 12px 9px 12px;}
.form .fbbox {width: 100%; padding: 12px 12px 12px 12px;}
.form .fbbox.tpad {padding-top: 24px;}

.form .fsubmit {
    display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    
    position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 24px 24px 12px 24px; text-align: center; color: var(--black); background-color: var(--white);
    opacity: 0; pointer-events: none; transition: opacity ease 360ms; z-index: 100;
}
.form .fsubmit.open {opacity: 1; pointer-events: auto;}
.form .fsubmit h4 {padding-bottom: 12px; font-size: 18px; line-height: 24px;}
.form .fsubmit p {padding-bottom: 12px; font-size: 14px; line-height: 20px;}

.form article.article {padding: 6px 12px 0px 12px !important;}


@media screen and (max-width: 750px) {
    .form {padding: 12px 6px 12px 6px;}
}



/**************** FORM LIST ****************/

.form .fitem.flist .fibox {margin: 0px -9px -9px -9px;}
.form .fitem.flist .lipad {width: 50%; padding: 3px 9px 3px 9px;}
.form .fitem.flist.flist3 .lipad {width: 33.333333%;}

.form .fitem.flist .li {padding: 7px 0px 7px 36px; opacity: 1; cursor: pointer;}
.form .fitem.flist .li .ico {position: absolute; top: 6px; left: 0px; width: 24px; height: 24px; border: solid 1px; border-color: var(--br-grey); transition: border-color ease 240ms;}
.form .fitem.flist .li .ico i {display: block; position: absolute; opacity: 0; transition: opacity ease 240ms;}
.form .fitem.flist .li .val {font-size: 16px; line-height: 22px; color: var(--black-ow);}
.form .fitem.flist .li input[type="checkbox"] {display: none;}
.form .fitem.flist .li input[type="radio"] {display: none;}
.form .fitem.flist .li.other {padding: 0px 0px 0px 34px;}
.form .fitem.flist .li.other input {width: 100%; max-width: 240px; height: 36px; padding: 0px; border-radius: 0px; border: none; border-bottom: solid 1px; border-color: var(--br-grey);}
.form .fitem.flist.check .li .ico {border-radius: 4px;}
.form .fitem.flist.check .li .ico i {top: 0px; left: 0px; width: 23px; height: 22px; font-size: 20px; line-height: 22px; text-align: center; color: var(--main);}
.form .fitem.flist.radio .li .ico {border-radius: 24px;}
.form .fitem.flist.radio .li .ico i {top: 5px; left: 5px; width: 12px; height: 12px; border-radius: 12px; background: var(--main);}

.form .fitem.flist .li:hover .ico {border-color: var(--br-main);}
.form .fitem.flist .li.other:hover input {border-color: var(--br-grey-dark);}
.form .fitem.flist .li.sel .ico {border-color: var(--br-main);}
.form .fitem.flist .li.sel .ico i {opacity: 1;}

.form .fitem.flist.error .li .ico {border-color: var(--br-red);}


@media screen and (max-width: 750px) {
    .form .fitem.flist.flist3 .lipad {width: 50%;}
}

@media screen and (max-width: 500px) {
    .form .fitem.flist .lipad {width: 100%;}
    .form .fitem.flist.flist3 .lipad {width: 100%;}
}



/**************** FORM IMGS ****************/

.form .fitem.fimgs .fibox {margin: -6px -6px -6px -6px;}
.form .fitem.fimgs .fibox .img {width: calc(20% - 12px); margin: 6px 6px 6px 6px; padding-top: calc(20% - 12px); background: var(--bg-grey-dark); border-radius: 9px; overflow: hidden;}
.form .fitem.fimgs .fibox .img img {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain;}
.form .fitem.fimgs .fibox .img .fa-plus {
    display: block; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0px 0px -12px;
    font-size: 24px; line-height: 24px; text-align: center;
}
.form .fitem.fimgs .fibox .img .fa-xmark {
    display: block; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
    font-size: 24px; line-height: 30px; text-align: center; color: var(--white); background: hsla(0,0%,0%,0.6); border-radius: 6px; cursor: pointer;
}
.form .fitem.fimgs .fibox .img.upload input[type="file"] {display: none !important;}
.form .fitem.fimgs .fibox .img.upload label {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}


@media screen and (max-width: 500px) {
    .form .fitem.fimgs .fibox .img {width: calc(33.333333% - 12px);padding-top: calc(33.333333% - 12px);}
}



/**************** FORM FROM TO ****************/

.form .fitem .fibox .from-to {width: 100%; background: var(--bg-grey-light); border-radius: 9px;}
.form .fitem .fibox .from-to input {width: 60px; height: 54px; padding: 0px; text-align: center; color: var(--black); background: var(--bg-grey-dark); border: none; pointer-events: none;}
.form .fitem .fibox .from-to .slider {flex: 1 1 auto; -webkit-flex: 1 1 auto; padding: 21px 24px;}
.form .fitem .fibox .from-to .slider .noUi-target { background: var(--bg-grey-dark); border: solid 1px var(--br-grey); border-radius: 6px; box-shadow: none;}
.form .fitem .fibox .from-to .slider .noUi-horizontal {height: 12px;}
.form .fitem .fibox .from-to .slider .noUi-connect {background: var(--bg-main);}
.form .fitem .fibox .from-to .slider .noUi-horizontal .noUi-handle {top: -7px; right: -12px; width: 24px; height: 24px;}
.form .fitem .fibox .from-to .slider .noUi-handle {background: var(--white); border: solid 1px var(--br-grey); border-radius: 6px; box-shadow: none; cursor: default;}
.form .fitem .fibox .from-to .slider .noUi-handle:after {display: none;}
.form .fitem .fibox .from-to .slider .noUi-handle:before {display: none;}
.form .fitem .fibox .from-to .slider .noUi-touch-area {cursor: grab;}



/**************** FORM PHONE ****************/

.form .fitem.fiphone b {display: block; position: absolute; top: 16px; left: 12px; font-weight: 400; font-size: 16px; line-height: 22px; color: var(--black);}
.form .fitem.fiphone input {padding: 6px 12px 6px 45px;}
.form .fitem.fiphone q {display: none;}
.form .fitem.fiphone q.txt {display: block;}
.form .fitem.fiphone.ok q.txt {display: none;}
.form .fitem.fiphone.ok q.ok {display: block;}
.form .fitem.fiphone.error q {display: none !important;}
.form .fitem.fiphone.error q.error {display: block !important;}



/**************** FORM BIG ****************//**************** FORM BIG ****************//**************** FORM BIG ****************/

.form.form-big {padding: 18px 12px 18px 12px;}

.form.form-big .fitem {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: flex-start; -webkit-justify-content: flex-start; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;
    padding: 18px 12px 18px 12px;
}
.form.form-big .fitem.w50 {width: 50%;}

.form.form-big .fitem legend {
    flex: 0 0 auto; -webkit-flex: 0 0 auto; display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    width: 30%; height: 54px; margin: 0px 0px 0px 0px; padding: 0px 12px 0px 0px;
}
.form.form-big .fitem legend.w60 {width: calc(60% + 6px) ;}
.form.form-big .fitem .fibox {flex: 1 1 auto; -webkit-flex: 1 1 auto; width: auto;}

.form.form-big .fitem .fibox > .mw90 {max-width: 90%;}
.form.form-big .fitem .fibox > .mw60 {max-width: 60%;}
.form.form-big .fitem .fibox > .mw30 {max-width: 30%;}

.form.form-big .fitem.flist {padding: 3px 12px 3px 12px;}
.form.form-big .fitem.flist .fibox {margin: 0px -9px 0px -9px;}
.form.form-big .fitem.flist .lipad {padding: 9px 9px 9px 9px;}

.form.form-big .fitem.flist.wrap {flex-wrap: wrap; -webkit-flex-wrap: wrap;}
.form.form-big .fitem.flist.wrap legend {width: 100%; height: auto; margin: -3px 0px 15px 0px;}
.form.form-big .fitem.flist.wrap {padding: 18px 12px 18px 12px;}
.form.form-big .fitem.flist.wrap .fibox {margin: -9px -9px -9px -9px;}
.form.form-big .fitem.flist.wrap .lipad {padding: 3px 9px 3px 9px;}

.form.form-big .fitem.flist.line3 .lipad {width: 33.333333%;}

.form.form-big .fitem .fibox .iti {max-width: 60%;}
.form.form-big .fitem .fibox .from-to {max-width: 60%;}

.form.form-big .fbbox {width: 100%; padding: 18px 12px 18px 12px;}
.form.form-big .fbbox.tpad {padding-top: 30px;}
.form.form-big .fbbox.bpad {padding-bottom: 6px;}

@media screen and (max-width: 750px) {
    .form.form-big {padding: 6px 6px 6px 6px;}
    .form.form-big .fitem {flex-wrap: wrap; -webkit-flex-wrap: wrap;}
    .form.form-big .fitem.w50 {width: 100%;}
    .form.form-big .fitem legend {width: 100%; height: auto; margin: -3px 0px 15px 0px;}
    .form.form-big .fitem legend.w60 {width: 100%;}
    .form.form-big .fitem .fibox > * {max-width: 100% !important;}
    .form.form-big .fitem.flist {padding: 18px 12px 18px 12px;}
    .form.form-big .fitem.flist .fibox {margin: -9px -9px -9px -9px;}
    .form.form-big .fitem.flist .lipad {padding: 3px 9px 3px 9px;}
    .form.form-big .fitem.flist.line3 .lipad {width: 100%;}
    .form.form-big .fbbox.bpad {padding-bottom: 12px;}
}



/**************** BIGFORM ****************//**************** BIGFORM ****************//**************** BIGFORM ****************/

.bigform {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px 0px 84px 0px; background: var(--white); border-radius: 0px; box-shadow: none; opacity: 0; transition: opacity ease 360ms; z-index: 5000;}
.bigform.open {opacity: 1;}

.bigform .header {width: 100%;}
.bigform .header-size {width: 100%; max-width: 900px; margin: 0px auto; padding: 24px 24px 24px 24px;}

.bigform .header .tabline {width: 100%; padding: 0px 24px 0px 24px;}
.bigform .header .tabline .tab-pad:nth-child(1) {width: 50%; padding: 0px 20px 0px 0px;}
.bigform .header .tabline .tab-pad:nth-child(2) {width: 50%; padding: 0px 0px 0px 20px;}
.bigform .header .tabline .tab {
    display: flex !important; display: -webkit-flex !important; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    
    position: relative; width: 100%; height: 60px; padding: 1px 15px 0px 15px; font-weight: 800; font-size: 16px; line-height: 20px; text-align: center; text-transform: uppercase; letter-spacing: 1px;
    color: var(--black); background: var(--bg-grey-light); box-sizing: border-box;
}
.bigform .header .tabline .tab b {display: block; font-weight: inherit !important;}

.bigform .header .tabline .tab i {display: block; position: absolute; top: 0px; width: 60px; height: 60px;}
.bigform .header .tabline .tab i.left {left: -60px;}
.bigform .header .tabline .tab i.left:before {
    content: ''; display: block; position: absolute; top: 0px; right: 0px;
    border: 15px solid transparent; border-top: 15px solid var(--bg-grey-light); border-right: 15px solid var(--bg-grey-light);
}
.bigform .header .tabline .tab i.left:after {
    content: ''; display: block; position: absolute; bottom: 0px; right: 0px;
    border: 15px solid transparent; border-bottom: 15px solid var(--bg-grey-light); border-right: 15px solid var(--bg-grey-light);
}
.bigform .header .tabline .tab i.right {right: -60px;}
.bigform .header .tabline .tab i.right:before {
    content: ''; display: block; position: absolute; top: 0px; left: 0px;
    border: 15px solid transparent; border-bottom: 15px solid var(--bg-grey-light); border-left: 15px solid var(--bg-grey-light);
}
.bigform .header .tabline .tab i.right:after {
    content: ''; display: block; position: absolute; bottom: 0px; left: 0px;
    border: 15px solid transparent; border-top: 15px solid var(--bg-grey-light); border-left: 15px solid var(--bg-grey-light);
}

.bigform .header .tabline .tab.sel {background: var(--bg-main-sublight);}
.bigform .header .tabline .tab.sel i.left:before {border-top: 15px solid var(--bg-main-sublight); border-right: 15px solid var(--bg-main-sublight);}
.bigform .header .tabline .tab.sel i.left:after {border-bottom: 15px solid var(--bg-main-sublight); border-right: 15px solid var(--bg-main-sublight);}
.bigform .header .tabline .tab.sel i.right:before {border-bottom: 15px solid var(--bg-main-sublight); border-left: 15px solid var(--bg-main-sublight);}
.bigform .header .tabline .tab.sel i.right:after {border-top: 15px solid var(--bg-main-sublight); border-left: 15px solid var(--bg-main-sublight);}

.bigform .footer {
    position: absolute; bottom: 0px; left: 0px; width: 100%; height: 84px;
    background: var(--white); box-shadow: 0px -6px 36px -6px hsla(0,0%,0%,0.12); z-index: 90;
}
.bigform .footer-size {width: 100%; max-width: 900px; margin: 0px auto; padding: 18px 24px 18px 24px;}
.bigform .footer .btn.back {padding: 14px 18px 14px 18px; margin-right: 24px; opacity: 0; pointer-events: none; transition: opacity ease 360ms;}
.bigform .footer .btn.back > [class*='fa-'] {font-size: 24px;}
.bigform .footer .btn.back.show {opacity: 1; pointer-events: auto;}

.bigform .footer .btn.next b {display: block;}
.bigform .footer .btn.next b.finish {display: none;}
.bigform[data-page="2"] .footer .btn.next b {display: none;}
.bigform[data-page="2"] .footer .btn.next b.finish {display: block;}


@media screen and (max-width: 750px) {
    .bigform {padding: 0px 0px 60px 0px;}
    .bigform .header-size {padding: 0px 0px 0px 0px !important;}
    .bigform .header .tabline {padding: 0px 0px 0px 0px;}
    .bigform .header .tabline .tab-pad {padding: 0px 0px 0px 0px !important;}
    .bigform .header .tabline .tab {height: 54px; font-size: 12px; line-height: 16px; white-space: pre-line;}
    .bigform .header .tabline .tab i.left {display: none;}
    .bigform .header .tabline .tab i.right {display: none;}
    .bigform .footer {height: 60px;}
    .bigform .footer-size {padding: 18px 18px 18px 18px;}
    .bigform .footer .btn {min-height: 24px; padding: 5px 0px 5px 0px; font-size: 14px; line-height: 14px; color: var(--main); background: none;}
    .bigform .footer .btn.llnk {color: var(--grey);}
    .bigform .footer .btn.back {padding: 5px 0px 5px 0px;}
    .bigform .footer .btn.back > [class*='fa-'] {height: 14px; font-size: 20px; line-height: 14px;}
}

/*** SYNC ***/

.bigform > .sync {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--bg-grey); opacity: 0; pointer-events: none; transition: opacity ease 240ms; z-index: 50;}
.bigform > .sync [class*='fa-'] {
    display: block; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0px 0px -30px;
    font-size: 48px; line-height: 60px; text-align: center; color: var(--main); animation: sync 1800ms infinite linear forwards;
}
.bigform.sync > .sync {opacity: 1; pointer-events: auto;}

/*** BODY ***/

.bigform .body {width: 100%; height: 100%;}
.bigform .page-line {position: absolute; top: 0%; left: 0%; width: 500%; height: 100%;}
.bigform[data-page="2"] .page-line {left: -100%;}
.bigform[data-page="3"] .page-line {left: -200%;}
.bigform[data-page="4"] .page-line {left: -300%;}
.bigform[data-page="5"] .page-line {left: -400%;}
.bigform .page {width: 20%; height: 100%;}
.bigform .page-size {width: 100%; max-width: 900px; margin: 0px auto; padding: 24px 24px 0px 24px;}
.bigform .page2 .page-size {max-width: 648px;}
.bigform .page .cbox {margin-bottom: 24px; box-shadow: none;}
.bigform .page .cbox .cbox-ttl {border-radius: 0px;}


@media screen and (max-width: 750px) {
    .bigform .page-size {padding: 24px 0px 0px 0px;}
    .bigform .page .cbox .cbox-ttl {margin: 0px 18px;}
}



/**************** PSYHO BIGFORM ****************/

#psyho-bigform.bigform .header .tabline .tab-pad:nth-child(1) {width: 20%; padding: 0px 20px 0px 0px;}
#psyho-bigform.bigform .header .tabline .tab-pad:nth-child(2) {width: 20%; padding: 0px 20px 0px 20px;}
#psyho-bigform.bigform .header .tabline .tab-pad:nth-child(3) {width: 20%; padding: 0px 20px 0px 20px;}
#psyho-bigform.bigform .header .tabline .tab-pad:nth-child(4) {width: 20%; padding: 0px 20px 0px 20px;}
#psyho-bigform.bigform .header .tabline .tab-pad:nth-child(5) {width: 20%; padding: 0px 0px 0px 20px;}

#psyho-bigform.bigform[data-page="2"] .footer .btn.next b {display: block;}
#psyho-bigform.bigform[data-page="2"] .footer .btn.next b.finish {display: none;}
#psyho-bigform.bigform[data-page="5"] .footer .btn.next b {display: none;}
#psyho-bigform.bigform[data-page="5"] .footer .btn.next b.finish {display: block;}

#psyho-bigform.bigform .page2 .page-size {max-width: 900px;}



/**************** BIGFORM PAGE CONTENT ****************//**************** BIGFORM PAGE CONTENT ****************//**************** BIGFORM PAGE CONTENT ****************/

/**************** CLIENT PSYHO ****************/

.bigform .psyhos-select {padding: 0px 0px 24px 0px;}
.bigform .psyhos-select .mbox {margin: 0px -12px 0px -12px;}
.bigform .psyhos-select .lipad {width: 25%; max-width: 104px; padding: 0px 12px 0px 12px;}
.bigform .psyhos-select .psyho {
    width: 100%; border: solid 4px var(--bg-grey); border-radius: 9px; box-shadow: 0px 0px 0px 2px var(--br-grey);
    overflow: hidden; cursor: pointer; transition: box-shadow ease 240ms;
}
.bigform .psyhos-select .psyho:hover {box-shadow: 0px 0px 0px 2px var(--br-main);}
.bigform .psyhos-select .psyho.sel {box-shadow: 0px 0px 0px 2px var(--br-main);}
.bigform .psyhos-select .psyho .img {width: 100%; padding-top: 100%;}
.bigform .psyhos-select .psyho .img .ibox {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.bigform .psyhos-select .psyho .img img {display: block; width: 100%; height: 100%; object-fit: cover;}

.bigform .psyhos-list .psyho {display: none;}
.bigform .psyhos-list .psyho.open {display: block;}
.bigform .psyhos-list .psyho .main-box {padding: 24px 24px 6px 24px; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;}
.bigform .psyhos-list .psyho .main-box .img {width: 162px; border-radius: 9px; overflow: hidden;}
.bigform .psyhos-list .psyho .main-box .img .ipad {width: 100%; padding-top: 100%;}
.bigform .psyhos-list .psyho .main-box .img .ibox {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.bigform .psyhos-list .psyho .main-box .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.bigform .psyhos-list .psyho .main-box .txt {flex: 1 1 auto; -webkit-flex: 1 1 auto; padding: 0px 0px 0px 24px; font-size: 16px; line-height: 22px; color: var(--black);}
.bigform .psyhos-list .psyho .main-box .txt .name {max-width: 100%; font-size: 24px; line-height: 33px;}
.bigform .psyhos-list .psyho .main-box .txt .type {max-width: 100%; padding: 12px 0px 12px 0px;}
.bigform .psyhos-list .psyho .main-box .txt .type .mbox {margin: -6px -18px -6px -18px;}
.bigform .psyhos-list .psyho .main-box .txt .type span {display: block; margin: 6px 18px 6px 18px;}
.bigform .psyhos-list .psyho .main-box .txt .price-box {max-width: 100%; padding: 6px 0px 0px 0px;}
.bigform .psyhos-list .psyho .main-box .txt .price {border-top: solid 1px var(--br-grey);}
.bigform .psyhos-list .psyho .main-box .txt .price > span {display: block; padding: 13px 0px 11px 0px; font-size: 10px; line-height: 8px; text-align: center; text-transform: uppercase; letter-spacing: 1px; color: var(--grey);}
.bigform .psyhos-list .psyho .main-box .txt .price > div {display: block; font-weight: 700; font-size: 30px; line-height: 26px; color: var(--black);}

.bigform .psyhos-list .psyho .sub-box {padding: 0px 24px 0px 24px;}
.bigform .psyhos-list .psyho .sub-box .sub-list {padding: 18px 0px 18px 0px; border-bottom: dashed 1px var(--br-grey-dark);}
.bigform .psyhos-list .psyho .sub-box .sub-list:last-child {border-bottom: none;}
.bigform .psyhos-list .psyho .sub-box .sub-list .sub-ttl {padding: 3px 0px 9px 0px; font-weight: 800; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 1px; color: var(--black);}
.bigform .psyhos-list .psyho .sub-box .sub-list .sub-ttl b {display: block; font-weight: 800;}
.bigform .psyhos-list .psyho .sub-box .sub-list .sub-ttl .lnk {display: block; margin: -1px 0px -1px 12px; font-size: 18px; line-height: 20px;}
.bigform .psyhos-list .psyho .sub-box .sub-list .mbox {margin: -3px -12px -3px -12px;}
.bigform .psyhos-list .psyho .sub-box .sub-list .li {margin: 3px 12px 3px 12px; font-size: 14px; line-height: 20px; color: var(--grey);}

@media screen and (max-width: 750px) {
    .bigform .psyhos-list .psyho .main-box {padding: 18px 18px 18px 18px;}
    .bigform .psyhos-list .psyho .sub-box {padding: 0px 18px 0px 18px;}
}

@media screen and (max-width: 500px) {
    .bigform .psyhos-list .psyho .main-box {flex-wrap: wrap; -webkit-flex-wrap: wrap;}
    .bigform .psyhos-list .psyho .main-box .img {width: 100%;}
    .bigform .psyhos-list .psyho .main-box .txt {width: 100%; padding: 18px 0px 0px 0px;}
    .bigform .psyhos-list .psyho .main-box .txt .name {font-size: 20px; line-height: 29px;}
}



/**************** CLIENT NO MATCH PSYHO ****************/

.no-match-psyhos {max-width: 480px; margin: 0px auto 24px auto; padding: 12px 24px 12px 24px; color: var(--black);}
.no-match-psyhos .ttl {padding: 6px 0px 6px 0px; font-weight: 700; font-size: 20px; line-height: 26px; text-align: center;}
.no-match-psyhos .li {padding: 6px 0px 6px 0px; font-weight: 400; font-size: 16px; line-height: 22px;}


@media screen and (max-width: 750px) {
    .no-match-psyhos {padding: 12px 18px 12px 18px;}
    .bigform .psyhos-list .psyho .sub-box {padding: 0px 18px 0px 18px;}
}