@font-face {
    font-family: Avenir;
    src: url("../fonts/Avenir-Light.ttf");
}

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

h1,h2,h3,h4,h5,h6{
    font-family: Saira, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif !important;
    font-weight: 600;
    line-height: 1.5;
}

h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.7rem;
  }

  h4 {
    font-size: 1.5rem;
  }

  h5 {
    font-size: 1.2rem;
  }

  h6 {
    font-size: 1rem;
  }

body,button,input,select,textarea {
    font-family: Saira, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif !important;
    font-weight: 400;
}

i.fa-solid,
i.fa-regular{font-family:"Font Awesome 6 Free" !important}

/* discount */

.page {
    padding-bottom: 23px;

}

.discount .container {
    padding: 35px !important;
}

.discount .container header {
    border-bottom: 4px solid #bcf1e9;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.discount .container header h1 {
    font-size: 23px;
    color: #313131;
}

.discount .container header .input-search {
    border: 2px solid #afd4e7;
    border-radius: 50px;
    display: flex;
    padding: 5px 16px;
    align-items: center;
    width: 196px !important;
    justify-content: space-between;
    margin-left: 15px;
}

.discount .container header .input-search input {
    border: none;
    width: 80% !important;
    outline: none;
}

.discount .container header .input-search input::placeholder {
    font-size: 15px;
}

.discount .container header .input-search .bx {
    color: #afd4e7;
}

.discount .container .col-lg-8 .person {
    background-color: white;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    height: 115px;
}

.discount .container .col-lg-8 .person .text {
    padding-right: 40px !important;
}

.discount .container .col-lg-8 .person .text h3 {
    font-size: 13px;
    color: #7f808a;
}

.discount .container .col-lg-8 .person .text h3 span {
    color: #62c4e3;
}

.discount .container .col-lg-8 .person .text p {
    color: #b6c1cd;
    font-size: 13px;
    display: block;
    margin-top: -5px;
}

.discount .container .col-lg-8 .person .image {
    width: 26%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding-top: 12px;
}

.discount .container .col-lg-8 .person .image img {
    width: 74% !important;
    border-radius: 50%;
    display: block;
    width: 77%;
}

.discount .container .col-lg-8 .body ul {
    list-style: none;
    padding: 0px;
    margin-top: 10px;
}

.discount .container .col-lg-8 .body ul li {
    font-size: 14px;
    color: #313131;
}

.discount .container .col-lg-8 .body h3,
.discount .container .col-md-8 .body p {
    font-size: 14px;
    color: #313131;
}

.discount .container .col-lg-8 .body p {
    margin-top: 20px;
    display: block;
}

.discount .container .col-lg-4 .systems {
    margin-top: -10px;
}

.discount .container .col-lg-4 .systems .system {
    height: 85px;
    padding-left: 10px;
    padding-top: 10px;
    overflow: hidden;
}

.discount .container .col-lg-4 .systems .system:hover {
    background-color: #f4f4f4;
}

.discount .container .col-lg-4 .systems .system.green {
    background-color: #f8fcfc;
}

.discount .container .col-lg-4 .systems .system.green:hover {
    background-color: #f8fcfc;
}

.discount .container .col-lg-4 .systems .system .image {
    width: 47px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.discount .container .col-lg-4 .systems .system .image img {
    box-shadow: 0px 1px 2px #474747;
    width: 88%;
    border-radius: 50%;
    display: block;
    transform: translateY(-4%);
}

.discount .container .col-lg-4 .systems .system .info {
    padding-left: 5px;
}

#infoPop {
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 2147483647;
    border-radius: 5px;
    flex-direction: column;
    box-shadow: 0px 0px 2px #27272733;
    width: 650px;
    width: 450px;
    padding: 15px;
}

#infoPop .close {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}

#infoPop .close .bx {
    font-size: 26px;
    color: #333;
}

.discount .container .col-lg-4 .systems .system .info h3 {
    color: #62c4e3;
    font-size: 14px;
}

.discount .container .col-lg-4 .systems .system .info span {
    color: black;
    font-size: 13px;
    display: block;
    margin: -3px 0 4px 0;
}

.discount .container .col-lg-4 .systems .system .info p {
    font-size: 11px;
    color: #7c7c7c;
    display: block;
}

/* replica */

.replica {
    padding-top: 100px;
    background-color: #fafafa;
}

.replica .container .row .col-md-12 .form {
    background-color: white;
    margin: 0 0 10px 0;
    padding: 25px 20px;
}

.replica .container .row .col-md-12 .form h2 {
    font-size: 17px;
    color: #313131;
    display: block;
    margin-bottom: 15px;
}

/* .replica .container .row .col-md-12 .form .inputs {
    margin-top: -10px;
} */

.replica .container .row .col-md-12 .form .inputs input {
    transition: 0.3s;
    color: #727272;
}

.replica .container .row .col-md-12 .form .inputs input:hover {
    background-color: #ecf4fb;
}
.replica .container .row .col-md-12 .form .inputs input:focus {
    border-color: #62c4e3;
    box-shadow: 0 0 0 0.25rem rgba(98, 196, 227, .25);
}
.replica .container .row .col-md-12 .form .input:nth-of-type(1),
.replica .container .row .col-md-12 .form .input:nth-of-type(3) {
    padding-right: 10px;
}

.replica .container .row .col-md-12 .form .input:nth-of-type(3),
.replica .container .row .col-md-12 .form .input:nth-of-type(4) {
    margin-top: 15px;
}

.replica .container .row .col-md-12 .form .alert {
    color: #ffa500;
    font-size: 13px;
    margin-top: 5px;
    padding: 0px !important;
}

.replica .container .row .col-md-12 .form .input:nth-of-type(2),
.replica .container .row .col-md-12 .form .input:nth-of-type(4) {
    padding-left: 10px;
}

.replica .container .row .col-md-12 .form .input label {
    font-size: 15px;
    color: #31353D;
    display: block;
    margin-bottom: 5px;
}

.replica .container .row .col-md-12 .form select,
.replica .container .row .col-md-12 .form input {
    width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-size: 15px;
    color: #313131;
    display: block;
}
.replica .container .row .col-md-12 .form select {
    padding: 7.5px 10px;
}
.replica .container .row .col-md-12 .form input {
    padding: 7.75px 10px;
}
.replica .container .row .col-md-12 .form input:hover {
    background-color: #FFFFFF !important;
}
.replica .container .row .col-md-12 .form input[type="radio"]:checked:hover {
    background-color: #62c4e3 !important;
}
.replica .container .row .col-md-4 .details {
    background-color: white;
    border: 1px solid #d6d6d6;
    padding: 12px 15px;
}

.replica .container .row .col-md-4 .details h2 {
    font-size: 17px;
    color: #313131;
}

.replica .container .row .col-md-4 .details .area {
    padding: 10px 10px 5px 10px;
    margin: 10px 0;
    background-color: #fcfcfc;
    display: block;
}

.replica .container .row .col-md-4 .details .area h3 {
    color: #ffa500;
    font-size: 15px;
}

.replica .container .row .col-md-4 .details .area p {
    color: #324158;
    font-size: 15px;
}

.replica .container .row .col-md-4 .details .separator {
    border-top: 1px dotted #d6d6d6;
    margin-top: 20px;
    margin-bottom: 20px;
}

.replica .container .row .col-md-4 .details > div {
    width: 100%;
}

.replica .container .row .col-md-4 .details > .divw {
    padding-right: 60px;
}

.replica .container .row .col-md-4 .details > div span.price {
    color: #00a6ff;
    font-size: 20px;
    font-weight: 500;
}

.replica .container .row .col-md-4 .details div span {
    color: black;
    font-size: 15px;
}

.replica .details button {
    background-color: #59C3E1;
    padding: 10px;
    width: 100%;
    display: block;
    transition: 0.2s;
    border: none;
    color: white;
    border-radius: 4px;
    margin: 15px 0 10px 0;
    /* font-size: 15px; */
}

.replica .details button:hover {
    background-color: #5dbbd7;
}

/* order record */

.order-record.page {
    padding-top: 74px !important;
}

.page-menu {
    height: 80px !important;
}

.order-record .container {
    background-color: #fafafa !important;
}

.order-record .container .buttons {
    margin-bottom: 25px !important;
    margin-top: 20px !important;
}

.order-record .container .buttons button {
    margin-right: 8px;
}

.page-menu {
    background-color: #efefef;
    margin-top: 0px !important;
}

.page-menu .container {
    background-color: transparent !important;
}

.order-record .container {
    margin-bottom: 40px !important;
}

.order-record .container .form {
    background-color: white !important;
    margin-bottom: 20px;
}

.order-record .container .form .it .text {
    width: 51.5%;
    align-items: center;
    padding-top: 15px;
}

.order-record .container .form .it {
    align-items: center;
    padding: 20px 30px !important;
    height: 110px;
    border-bottom: 1px dotted #cecece;
}

.order-record .container .form .it .button button,
.order-record .container .form .it .button-mobile button {
    color: #7f808a;
    background-color: #e2e2e2;
    border-radius: 4px;
    border: none;
    padding: 9px;
    text-align: center;
    width: 100px;
}

.order-record .container .form .list {
    padding: 25px !important;
}

.order-record .container .form .list ul {
    padding: 0px;
    display: block;
    margin-left: 35px;
}

.order-record .container .form .list ul li {
    color: 15px !important;
    color: #313131 !important;
    margin: 5px 0 !important;
}

.order-record .container .form .it .parag p {
    color: #62c4e3;
    font-size: 20px;
}

.order-record .container .form .it .parags p {
    color: #616161;
    font-size: 15px;
}

.page-menu .container .item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #616161;
    background-color: #efefef;
    padding: 20px;
    text-decoration: none;
    margin-right: 20px;
    margin-top: 8px;
}

.page-menu .container .item:hover {
    background-color: white !important;
    color: black;
    border-bottom: 2px solid black;
}

.order-record .container .form .button-mobile {
    display: none !important;
}

/* company */

.company .page-menu {
    background-color: #fdfce8 !important;
    margin-top: -27px !important;
    margin-bottom: 30px !important;
}

.company .page-menu .item {
    background-color: #fdfce8 !important;
}

.company .container {
    background-color: transparent !important;
}

.company .container .form {
    margin-bottom: 20px !important;
    background-color: #ffffff;
    padding: 20px !important;
}

.company .container .form h1 {
    font-size: 26px;
    color: #313131;
}

.company .container .form > div .image {
    width: 6.5%;
    height: 100%;
    margin-right: 30px !important;
}

.company .container .form > div .image img {
    width: 100%;
}

.company .container .form .it {
    padding: 20px !important;
}

.company .container .form .it h2 {
    font-size: 23px;
    color: #313131;
    display: block;
    margin-bottom: 25px !important;
    margin-top: -10px !important;
}

.company .container .form .it h2.h-2 {
    margin-top: 0px !important;
}

.company .container .form .it p {
    font-size: 15px;
    color: #313131;
    letter-spacing: 2px;
    line-height: 1.7;
}

.company .container .persons {
    background-color: #fafafa;
}

.company .container .persons .person {
    background: white;
    height: auto !important;
    width: calc(33.3% - 6px) !important;
    border-radius: 10px;
    transition: 1s;
    border: 1px solid #ffffff !important;
}

.company .container .persons .person .info {
    padding: 0 40px 25px 40px;
}

.company .container .persons .person .info h4 {
    color: #62c4e3;
    font-size: 13px !important;
    font-weight: 700;
    margin-bottom: 0px;
}

.company .container .persons .person .info span {
    color: #7f808a;
    font-size: 13px;
    display: block;
    text-align: center;
}

.company .container .persons .person .info p {
    color: #b6c1cd;
    font-size: 13px;
    margin-top: 10px !important;
}

.company .container .persons .person .hearts {
    position: absolute;
    background-color: #ececec;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    top: 10px;
    padding-left: 10px;
    /* padding-top: 3px; */
}

.booking.company .container .persons .person .hearts{
    padding-top: 3px;
}

.company .container .persons .person .hearts .bx {
    top: 50% !important;
    /* left: 50% !important; */
    transform: translate(-50%, 15%) !important;
    display: block;
    color: #ececec;
    z-index: 10000 !important;
}

.company .container .persons .person .image .hearts-mobile {
    display: none !important;
    position: absolute;
}

.company .container .persons .person .hearts:hover .bx {
    color: #ffffff !important;
}

.company .container .persons .person .hearts .bx:nth-of-type(1) {
    font-size: 31px;
    color: #ffffff;
}

.company .container .persons .person .hearts .bx:nth-of-type(2) {
    padding-top: 6px !important;
    font-size: 19px;
}

.company .container .persons .person .image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding-top: 55px;
    padding-bottom: 30px;
    margin-bottom: 22px !important;
}

.company .container .persons .person .image img {
    display: block;
    width: 115px;
    border-radius: 50%;
    height: 115px;
    object-fit: cover;
}

.company .container .persons .person:hover {
    border: 1px solid #74bcd4 !important;
}

.company .container .tit {
    /* height: 95px !important; */
    /* margin-top: -15px !important; */
    display: flex !important;
    justify-content: flex-start;
    align-items: baseline !important;
    /* align-items: center !important; */
}

.company .container .tit .container {
    padding-left: 40px !important;
}

.company .container .tit-2 {
    margin-top: 0px !important;
}

.company .container .tit-3 {
    margin-top: 0px !important;
}

.company .container .tit h2 {
    color: #313131;
    font-size: 23px;
}

.company .container .latest-courses {
    margin-top: 0px !important;
}

.company .container .column {
    margin-top: -5px !important;
}

.company .container .courses-mobile {
    display: none !important;
}

.company .container .courses-mobile .image .hearts {
    position: absolute;
    background-color: #ececec;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    top: 10px;
    left: 10px;
}

.company .container .courses-mobile .image .hearts .bx:nth-of-type(1) {
    font-size: 29px !important;
    padding: 4px;
    color: white;
    z-index: 500;
}

.company .container .courses-mobile .image .hearts .bx:nth-of-type(2) {
    font-size: 18px !important;
    z-index: 700;
    padding: 9.3px;
    color: #e9e9e9;
}

.company .container .courses-mobile .image .hearts:hover .bx:nth-of-type(2) {
    color: #ffffff;
}

/* copy-choose */

.copy-choose {
    padding-bottom: 100px;
}

.copy-choose .container {
    background-color: transparent !important;
}

.copy-choose header {
    background-image: url("../images/nimbus.webp");
    background-position: center center;
    background-size: cover;
    margin-top: -27px !important;
    background-repeat: no-repeat;
    height: 250px !important;
    position: relative;
}

.copy-choose header::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff73;
    z-index: 200;
    position: absolute;
    top: 0;
    left: 0;
}

.copy-choose header .container {
    height: 100%;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-choose header .container h1 {
    color: white;
    font-weight: 600;
    font-size: 35px;
    text-shadow: 2px 3px 6px #616161;
    z-index: 500;
}

.copy-choose header .stages {
    background-color: #ffffff;
    z-index: 1000 !important;
    /*border: 1px solid #cecece;*/
    border-radius: 5px;
    position: absolute;
    box-shadow: 0px 0px 3px #616161;
    left: 50%;
    width: 980px;
    height: 150px;
    bottom: -85px;
    transform: translateX(-50%);
}

.copy-choose header .stages .container h2 {
    color: #313131;
    font-size: 24px;
    margin: -15px 0 25px 0 !important;
    display: block;
}

.copy-choose header .stages .stage {
    display: flex;
    justify-content: space-between;
    width: 68%;
    position: relative;
}

.copy-choose header .stages .stage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 2px;
    width: 100%;
    background-color: #b6f4e9;
    z-index: -1;
}

.copy-choose header .stages .stage .st {
    background-color: #62c4e3;
    border-radius: 50%;
    height: 18px;
    width: 18px;
}

.copy-choose header .stages .stage-text {
    display: flex !important;
    width: 72.5%;
    margin-top: 8px !important;
}

.copy-choose header .stages .stage-text span {
    color: #62c4e3;
    font-size: 15px;
}

.copy-choose .search {
    margin-top: 150px;
}

.copy-choose .search .container img {
    width: 145px;
}

.copy-choose .search .container h2 {
    font-size: 24px;
    color: #313131;
    font-weight: 600;
    margin: 30px 0;
}

.copy-choose .search .container p {
    color: #616161;
    font-size: 15px;
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

/* contact */

.contact header {
    height: 330px;
    background-image: url("../images/contact_us.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -29px;
    background-position: center center;
}

.contact .container .contact-form {
    padding: 30px;
    margin-top: 30px;
}

.contact .container .contact-form .content h1 {
    font-size: 23px;
    color: #31353d;
    display: block;
    margin: 0 0 20px 0;
}

.contact .container .contact-form .content label {
    font-size: 15px;
    color: #737373;
    margin-bottom: 10px;
    display: block;
}

.contact .container .contact-form .col-md-6 {
    margin-bottom: 35px;
}

.contact .container .contact-form .col-md-6:nth-of-type(1) {
    padding-right: 34px !important;
}

.contact .container .contact-form .col-md-6:nth-of-type(3) {
    padding-right: 34px !important;
}

.contact .container .contact-form .col-md-6:nth-of-type(2) {
    padding-left: 34px !important;
}

.contact .container .contact-form .col-md-6:nth-of-type(4) {
    padding-left: 34px !important;
}

.contact .container .contact-form .col-md-6 input,
.contact .container .contact-form .col-md-6 select,
.contact .container .contact-form .col-md-12 textarea {
    border: 1px solid #afd4e7;
    border-radius: 3px;
    padding: 10px 13px;
    width: 100%;
    display: block;
    color: #00a6ff;
}

.contact .container .contact-form .col-md-6 select {
    color: #142e3a;
}

.contact .container .contact-form .col-md-12 textarea {
    height: 160px;
}

.contact .container .contact-form .col-md-6 input:hover {
    background-color: #eaf7ff;
}

.contact .container .contact-form button {
    color: white;
    background-color: #5dbbd7;
    padding: 9px;
    border-radius: 5px;
    width: 98%;
    border: 1px solid #5dbbd7;
    text-align: center;
    transition: 0.3s;
    font-size: 14px;
    display: block;
    margin: 35px auto 0 auto;
}

.contact .container .contact-form button:hover {
    border: 1px solid #5dbbd7;
    background-color: white;
    color: #5dbbd7;
}

/* about */

.about header {
    height: 520px;
    background-image: url("../images/about.jpg");
    background-size: 130%;
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    /*filter: blur(8px);
    -webkit-filter: blur(8px);
    */
}

.about header .content {
    background: #fafafa;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 380px;
    height: 190px;
    text-align: center;
}

.about header .content h2 {
    color: #62c4e3;
    font-size: 20px;
    display: block;
    width: 100%;
    position: relative;
    margin: 20px 0 !important;
}

.about header .content h2::before {
    content: "";
    width: 35%;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translate(-101%, -50%);
    text-align: center;
    border-top: 3px dotted #c5c5c5;
    z-index: -1;
}

.about header .content h2::after {
    content: "";
    width: 35%;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translate(32%, -50%);
    text-align: center;
    border-top: 3px dotted #c5c5c5;
    z-index: -1;
    background-color: transparent;
}

.about header .content h1 {
    color: #324158;
    font-size: 25px;
    line-height: 1.7;
    font-weight: 700;
}

.about .content-1 {
    background-image: url("../images/about-white.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 700px;
    border: 2px solid transparent;
}

.about .content-1 .container {
    background-color: transparent;
}

.about .content-1 .container img {
    display: block;
    background-color: transparent;
    width: 180px;
    margin: 110px auto 40px auto;
}

.about .content-1 .container p {
    color: #686369;
    font-size: 23px;
    letter-spacing: 7px;
    text-align: center;
    display: block;
}

.about .content-1 .container p:nth-of-type(1) {
    margin-bottom: 30px;
    display: block;
}

.about .content-1 .container p:nth-of-type(3) {
    font-family: "Avenir", sans-serif !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    margin-top: 35px;
}

.about .content-d {
    height: 550px;
}

.about .content-d .image {
    width: 50%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.about .content-d.content-2 .image {
    background-image: url("../images/about-us-1-min.png");
}

.about .content-d.content-3 .image {
    background-image: url("../images/about-us-2-min.png");
}

.about .content-d.content-4 .image {
    background-image: url("../images/about-us-3-min.png");
}

.about .content-d .text {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.about .content-d .text h2 {
    color: #333;
    font-size: 35px;
    display: block;
    margin-bottom: 35px;
}

.about .content-d .text p {
    font-size: 18px;
    color: #333;
    display: block;
    text-align: center;
    max-width: 55%;
}

.about .content-d .image img {
    width: 100% !important;
    height: 100% !important;
}

.about > .content-a4 {
    background-image: url("../images/about-white.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    height: 1530px;
    padding-top: 150px;
}

.about > .content-a4 h2 {
    color: #686369;
    font-size: 40px;
    text-align: center;
    display: block;
    font-weight: 700;
    text-shadow: 0px 0px 5px #b3b3b32d;
}

.about > .content-a4 .container .icons {
    width: 62%;
    display: block;
    margin: 129px auto 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
}

.about > .content-a4 .container .icons .icon {
    width: 32%;
    text-align: center;
    margin-bottom: 130px;
}

.about > .content-a4 .container .icons .icon img {
    display: block;
    margin: 0 auto 30px auto;
    width: 100px;
}

.about > .content-a4 .container .icons .icon span {
    color: black;
    font-size: 24px;
}

.about .p-text {
    display: block;
    width: 600px;
    margin: 60px auto 0 auto;
    line-height: 2;
    letter-spacing: 4px;
    font-size: 18px;
    color: #31353d;
}

.about .content-d .text-mobile {
    display: none !important;
}

/* share */

.share .container .form {
    padding: 30px 25px;
}

.share .container .form h1 {
    font-size: 23px;
    color: #31353d;
    margin-bottom: 20px;
}

.share .container .form .input-area {
    margin-bottom: 40px !important;
}

.share .container .form .input-area .input,
.share .container .form input {
    display: flex;
    flex-direction: column;
}

.share .container .form .input-area label {
    color: #737373;
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
}

.share .container .form .input-area .input:nth-of-type(1) {
    padding-right: 35px !important;
    margin-bottom: 35px !important;
}

.share .container .form .input-area .input:nth-of-type(2) {
    padding-left: 35px !important;
    margin-bottom: 35px !important;
}

.share .container .form .input-area .input:nth-of-type(3) {
    margin-bottom: -35px !important;
}

.share .container .form .input-area select,
.share .container .form .input-area input {
    color: #142e3a;
    border: 1px solid #c4e4f4;
    padding: 8px 13px;
}

.share .container .form .input-area input {
    color: #00a6ff;
}

/* chat */

.share .container .form .chat-area .direc {
    display: flex;
    width: 100%;
    margin-top: 70px;
    margin-bottom: 13px;
    justify-content: center;
}

.share .container .form .chat-area .direc .chat-ico {
    padding: 4px;
    outline: none;
    height: 30px !important;
    width: 30px !important;
    border: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    display: flex !important;
    align-items: center !important;
    background-color: #fafafa !important;
    justify-content: center !important;
}

.share .container .form .chat-area .direc .select,
.share .container .form .chat-area .direc select {
    padding: 4px !important;
    width: 45px !important;
    height: 30px !important;
    position: relative;
    cursor: context-menu;
    font-family: Arial, Helvetica, sans-serif !important;
}

.share .container .form .chat-area .direc .select.sel {
    width: 65px !important;
}

.share .container .form .chat-area .direc .select.sel .option {
    padding-top: 4px !important;
}

.share .container .form .chat-area .direc .quote {
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: context-menu;
    padding-top: 15px !important;
}

.share .container .form .chat-area .direc .line-space > img {
    width: 17px !important;
}

.share .container .form .chat-area .direc .select .bx-chevron-down {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #444;
    font-weight: 700 !important;
}

.share .container .form .chat-area .direc .select .select-icon {
    display: none;
}

.share .container .form .chat-area .direc .select .list span {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 20px;
    cursor: context-menu;
    border-left: 1px solid #e2e2e2;
    font-size: 10px;
}

.share .container .form .chat-area .direc .select .list span:hover {
    background-color: #00a6ff;
    color: white;
}

.share .container .form .chat-area .direc .select .list {
    position: absolute;
    bottom: -60px;
    background-color: white;
    display: none;
    width: 100%;
    border-bottom: 1px solid #e2e2e2;
    align-items: center;
    flex-direction: column;
}

.share .container .form .chat-area .direc .select .list-1 {
    bottom: -100px;
}

.share .container .form .chat-area .direc .select .list-2 {
    bottom: -160px;
}

.share .container .form .chat-area .direc .select .option {
    display: none;
    font-size: 12px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: lowercase !important;
    padding-bottom: 3px;
}

.share .container .form .chat-area .direc .select.size {
    padding-bottom: 2px !important;
}

.share .container .form .chat-area .direc .select.align {
    padding-bottom: 0px !important;
    padding-top: 8px !important;
}

.share .container .form .chat-area .direc .select.align .select-icon .bx {
    border: 2px solid orange !important;
}

.share .container .form .chat-area .direc .chat-active:active {
    border-radius: 5px !important;
    background-color: #d9e7f0 !important;
}

.share .container .form .chat-area .direc .select.size .option {
    font-size: 10px !important;
}

.share .container .form .chat-area .direc .select .option.active {
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: lowercase !important;
}

.share .container .form .chat-area .direc .select .list-3 span {
    font-size: 14px !important;
}

.share .container .form .chat-area .direc .select .list-3 {
    bottom: -80px;
}

.share .container .form .chat-area .direc .select .list.active {
    display: flex !important;
    z-index: 2147483647;
    background-color: white !important;
}

.share .container .form .chat-area .direc .color .table-colors,
.share .container .form .chat-area .direc .background-table {
    padding: 10px;
    background: white;
    width: 190px !important;
    height: 170px !important;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    bottom: -175px;
    display: none;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 2147483647 !important;
    transform: translateX(-50%);
    box-shadow: 0px 0px 5px #cccccc;
}

.share .container .form .chat-area .direc .color .table-colors.active,
.share .container .form .chat-area .direc .background-table.active {
    display: flex !important;
}

.share .container .form .chat-area .direc .color .table-colors .coll,
.share .container .form .chat-area .direc .background-table .coll {
    border-radius: 50%;
    width: 9.7% !important;
    border: 1px solid #ececec;
    display: block;
    height: 15px;
    cursor: pointer;
    background-color: #00a6ff;
}

.coll.coll-0 {
    background-color: black !important;
}

.coll.coll-1 {
    background-color: #494346 !important;
}

.coll.coll-2 {
    background-color: #65635f !important;
}

.coll.coll-3 {
    background-color: #969c98 !important;
}

.coll.coll-4 {
    background-color: #b7b7b6 !important;
}

.coll.coll-5 {
    background-color: #cec9ce !important;
}

.coll.coll-6 {
    background-color: #d9d9da !important;
}

.coll.coll-7 {
    background-color: #f0f1ea !important;
}

.coll.coll-8 {
    background-color: #f3f3ec !important;
}

.coll.coll-9 {
    background-color: white !important;
}

.coll.coll-10 {
    background-color: #990100 !important;
}

.coll.coll-11 {
    background-color: #fb0300 !important;
}

.coll.coll-12 {
    background-color: #fd9b00 !important;
}

.coll.coll-13 {
    background-color: #fffa01 !important;
}

.coll.coll-14 {
    background-color: #00fe09 !important;
}

.coll.coll-15 {
    background-color: #02ffff !important;
}

.coll.coll-16 {
    background-color: #5183e4 !important;
}

.coll.coll-17 {
    background-color: #0200fc !important;
}

.coll.coll-18 {
    background-color: #9c02fb !important;
}

.coll.coll-19 {
    background-color: #fd02ef !important;
}

.coll.coll-20 {
    background-color: #e4b9b0 !important;
}

.coll.coll-21 {
    background-color: #f2cccc !important;
}

.coll.coll-22 {
    background-color: #fde8cd !important;
}

.coll.coll-23 {
    background-color: #fdf1d7 !important;
}

.coll.coll-24 {
    background-color: #d8ead4 !important;
}

.coll.coll-25 {
    background-color: #d1dfe2 !important;
}

.coll.coll-26 {
    background-color: #c6dbf5 !important;
}

.coll.coll-27 {
    background-color: #d2e0f4 !important;
}

.coll.coll-28 {
    background-color: #dbd3e3 !important;
}

.coll.coll-29 {
    background-color: #ebd1de !important;
}

.coll.coll-30 {
    background-color: #d87d67 !important;
}

.coll.coll-31 {
    background-color: #e39b94 !important;
}

.coll.coll-32 {
    background-color: #f5cba1 !important;
}

.coll.coll-33 {
    background-color: #ffe494 !important;
}

.coll.coll-34 {
    background-color: #b4d8a4 !important;
}

.coll.coll-35 {
    background-color: #a0c4c8 !important;
}

.coll.coll-36 {
    background-color: #a9c3f8 !important;
}

.coll.coll-37 {
    background-color: #a3addb !important;
}

.coll.coll-38 {
    background-color: #b4a7d4 !important;
}

.coll.coll-39 {
    background-color: #dba3be !important;
}

.coll.coll-40 {
    background-color: #c43f26 !important;
}

.coll.coll-41 {
    background-color: #e26365 !important;
}

.coll.coll-42 {
    background-color: #f9b471 !important;
}

.coll.coll-43 {
    background-color: #fddd67 !important;
}

.coll.coll-44 {
    background-color: #92c67f !important;
}

.coll.coll-45 {
    background-color: #70a8ac !important;
}

.coll.coll-46 {
    background-color: #6da1ec !important;
}

.coll.coll-47 {
    background-color: #71a7dd !important;
}

.coll.coll-48 {
    background-color: #8d7ac0 !important;
}

.coll.coll-49 {
    background-color: #fc84a8 !important;
}

.coll.coll-50 {
    background-color: #bc7a9c !important;
}

.coll.coll-51 {
    background-color: #cc0003 !important;
}

.coll.coll-52 {
    background-color: #e29037 !important;
}

.coll.coll-53 {
    background-color: #eec430 !important;
}

.coll.coll-54 {
    background-color: #66a953 !important;
}

.coll.coll-55 {
    background-color: #458095 !important;
}

.coll.coll-56 {
    background-color: #3b7dd6 !important;
}

.coll.coll-57 {
    background-color: #3e84c2 !important;
}

.coll.coll-58 {
    background-color: #6350a4 !important;
}

.coll.coll-59 {
    background-color: #a84c79 !important;
}

.coll.coll-60 {
    background-color: #7d1f0c !important;
}

.coll.coll-61 {
    background-color: #9b0203 !important;
}

.coll.coll-62 {
    background-color: #b45e02 !important;
}

.coll.coll-63 {
    background-color: #bf9100 !important;
}

.coll.coll-64 {
    background-color: #3a781f !important;
}

.coll.coll-65 {
    background-color: #105064 !important;
}

.coll.coll-66 {
    background-color: #1058ca !important;
}

.coll.coll-67 {
    background-color: #0b5496 !important;
}

.coll.coll-68 {
    background-color: #351c73 !important;
}

.coll.coll-69 {
    background-color: #7a1a49 !important;
}

.coll.coll-70 {
    background-color: #560e01 !important;
}

.coll.coll-71 {
    background-color: #6a0202 !important;
}

.coll.coll-72 {
    background-color: #764207 !important;
}

.coll.coll-73 {
    background-color: #815e00 !important;
}

.coll.coll-74 {
    background-color: #264d18 !important;
}

.coll.coll-75 {
    background-color: #0a313e !important;
}

.coll.coll-76 {
    background-color: #1a468b !important;
}

.coll.coll-77 {
    background-color: #033866 !important;
}

.coll.coll-78 {
    background-color: #1f1450 !important;
}

.coll.coll-79 {
    background-color: #481335 !important;
}

.share .container .form .input input:hover {
    background-color: #eaf7ff;
}

.share .container .form .input select:hover {
    background-color: #eaf7ff;
}

.share .container .form .chat-area .direc .color .table-colors .coll:hover {
    box-shadow: 0px 0px 2px #929292;
    transform: scale(102%);
}

.share .container .form .chat-area .chat textarea {
    border: 1px solid #c4e4f4;
    width: 100%;
    position: relative;
    padding: 8px 13px;
    color: #00a6ff;
    display: none;
}

.share .container .form .chat-area .chat iframe {
    border: 1px solid #c4e4f4;
    width: 100%;
    position: relative;
    padding: 8px 13px;
    height: 500px;
    color: #00a6ff;
}

.share .container .form .chat-area .chat iframe:hover {
    background-color: #eaf7ff;
}

.share .container .form .chat-area .chat iframe.center body font,
.share .container .form .chat-area .chat iframe.center body {
    text-align: center !important;
}

.share .container .form .chat-buttons {
    margin-top: 40px !important;
}

.share .container .form .chat-buttons .black {
    background-color: #324158;
    display: block;
    padding: 9px;
    border-radius: 4px;
    width: 235px;
    transition: 0.2s;
    font-size: 14px;
    color: white;
    border: 1px solid #324158 !important;
}

.share .container .form .chat-buttons .gray {
    background-color: #cccccc;
    display: block;
    padding: 9px;
    border-radius: 4px;
    width: 235px;
    transition: 0.2s;
    font-size: 14px;
    color: white;
    border: 1px solid #cccccc !important;
}

.share .container .form .chat-buttons .blue {
    display: block;
    padding: 9px;
    border-radius: 4px;
    background-color: #61c4e3;
    width: 235px;
    transition: 0.2s;
    font-size: 14px;
    color: white;
    border: 1px solid #61c4e3 !important;
    margin-left: 15px !important;
}

.share .container .form .chat-buttons button:hover {
    color: #00a6ff !important;
    border: 1px solid #00a6ff !important;
    background-color: transparent !important;
}

/* my home */

.my-home .container {
    background-color: transparent !important;
}

.my-home .page-menu {
    margin-top: -26px !important;
}

.my-home .container .form {
    margin-top: 40px !important;
    padding: 0 50px !important;
}

.my-home .container .form h2 {
    color: #31353d;
    font-size: 23px;
    display: block;
    margin-bottom: 35px !important;
}

.my-home .container .form span:nth-of-type(1) {
    font-size: 16px;
    color: #31353d;
}

.my-home .container .form span:nth-of-type(2),
.my-home .container .form .edits a {
    color: #7f808a;
    text-decoration: none;
}

.my-home .container .form span:nth-of-type(2),
.my-home .container .form .edits a,
.my-home .container .form .edits input {
    display: block;
    width: 45%;
}

.my-home .container .form .edits .col-md-6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    height: 50px;
    border: 1px solid #e4e4e4;
}

.my-home .container .form .edits:nth-of-type(1) {
    margin-bottom: 60px;
}

.my-home .container .form .edits:nth-of-type(2) {
    margin-bottom: 25px;
}

.my-home .container .form .edits input {
    border: none;
    outline: none;
    color: #00a6ff;
}

.my-home .container .form .edits .bx {
    font-size: 30px;
    color: #45d1b1 !important;
}

/* transcript */

.transcript header {
    height: 400px;
    background-size: cover;
    background-position: center center;
    margin-top: -26px !important;
    background-attachment: fixed;
    position: relative;
}

.transcript > .container {
    margin-top: 20px;
}

.transcript .btns {
    background-color: #ffffff !important;
    padding: 20px 0 !important;
}

.transcript header::before {
    content: "";
    background-color: #ffffff52;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.transcript header .titl {
    background-color: #0000004d;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: 0;
    overflow: hidden;
    width: 685px;
    height: 190px;
    border-radius: 0 20px 20px 0;
}

.transcript header .titl .container {
    margin: auto !important;
    display: block;
    height: 100%;
    position: absolute;
    padding-left: 295px !important;
    padding-top: 50px !important;
}

.transcript header .titl .container h1 {
    color: white;
    text-align: left;
    font-size: 40px;
}

.transcript header .titl .container h2 {
    color: white;
    font-size: 30px;
    text-align: left;
}

.transcript header .titl .container h3 {
    color: white;
    text-align: left;
    font-size: 20px;
}

.transcript header .input {
    z-index: 1000 !important;
    position: absolute;
    top: 78%;
    transform: translateY(-50%);
    margin-left: 285px;
    background-color: white;
    border: 1px solid #afd4e7;
    border-radius: 6px !important;
    width: 305px !important;
    padding: 8px;
    display: flex;
    justify-content: space-between;
}

.transcript header .input input {
    border: none;
    outline: none;
    color: #00a6ff;
    width: 90%;
}

.transcript header .input input::placeholder {
    color: #bebfc0;
}

.transcript header .input .bx {
    color: #b7b7b6;
    font-size: 20px;
}

.transcript > .container .button-zone {
    flex-wrap: nowrap !important;
}

.transcript .container .button-zone span {
    display: block;
    width: 8%;
    color: #919191;
    font-size: 15px;
}

.transcript .container .button-zone .buts {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.transcript .container .button-zone .buts button {
    font-size: 12px;
    color: #31353d;
    padding: 5px 3px;
    width: 89px;
    transition: 0.2s;
    border: none;
    margin: 3px;
    outline: none;
    border-radius: 50px;
}

.transcript .container .button-zone .buts button:hover {
    font-size: 12px;
    color: white;
    background-color: #5dbbd7;
    width: 89px;
    border: none;
    outline: none;
    padding: 5px 3px;
    border-radius: 50px;
}

.transcript .container .button-zone .blue {
    width: 10%;
}

.transcript .container .button-zone .blue button {
    font-size: 12px;
    color: white;
    background-color: #5dbbd7;
    width: 89px;
    border: none;
    outline: none;
    padding: 5px 3px;
    border-radius: 50px;
}

.transcript .container .persons:nth-of-type(1) {
    margin-top: 35px !important;
}

.transcript .container .persons .person .hearts {
    text-align: right !important;
    justify-content: flex-end !important;
    right: 10px !important;
    z-index: 1 !important;
}

.booking.transcript .container .persons .person .hearts {
    /* left: 180px !important; */
}

.transcript .container .persons:nth-of-type(2) {
    margin-bottom: 35px !important;
    transition: 0.2s;
}

.transcript .container .persons:nth-of-type(2) .person .image {
    padding: 10px;
    border: 1px solid #ececec;
    width: 120px !important;
    height: 120px !important;
    margin: 18px auto !important;
}

.transcript .container .persons:nth-of-type(2) .person .image img {
    border-radius: 0px !important;
    width: 100%;
}

.transcript .container .persons:nth-of-type(2) .person h4 {
    color: black !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    display: block;
    margin: 20px 0 20px 0 !important;
}

.transcript .container .persons .person-bar {
    overflow: hidden;
    transition: 0.2s;
}

.transcript .container .persons .personBar {
    overflow: hidden;
    margin: auto;
    transition: 0.2s;
    width: 950px;
}

.transcript .container .persons-2 .arrs {
    width: 100% !important;
    display: flex !important;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between !important;
}

.transcript .container .persons-2 .arrs .bx {
    font-size: 65px;
    color: #bcf1e5;
}

.transcript .container .persons-2 .arrs .left {
    transform: translateX(-80%);
}

.transcript .container .persons-2 .arrs .right {
    transform: translateX(80%);
}

.transcript .title {
    margin-top: 30px !important;
}

.transcript .title h2 {
    font-size: 23px !important;
    font-weight: 600 !important;
    color: #31353d !important;
}

/*==== 頁碼 ====*/

.carousel-numbers {
    padding-top: 10px;
    margin-top: 35px;
}

.carousel-numbers .carousel-bar {
    /* overflow: hidden;
    width: 200px; */
    margin: 0 auto;
    transition: 0.4s;
}

.carousel-numbers .arrs {
    display: flex;
    justify-content: space-between;
    width: 250px;
    margin: auto;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    align-items: center;
}

.carousel-numbers .arrs .arrow {
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.carousel-numbers .bar {
    width: auto;
    margin: 0;
    justify-content: center;
    display: flex;
    transition: 0.2s;
}

.carousel-numbers .bar .number {
    font-size: 15px;
    color: #959595;
    display: block !important;
    padding: 0 20px !important;
    margin: auto;
    width: 40px !important;
    text-align: center;
    height: 40px;
}

.carousel-numbers .number {
    padding: 10px;
    display: block;
}

.carousel-numbers .number.active span {
    border: 1px solid #858585;
}

.carousel-numbers .number span {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}

.carousel-numbers .arrs .arrow .bx {
    font-size: 25px;
    color: #858585;
}

.circleStyle .bar .pagination li.page-item a,
.circleStyle .bar .pagination li.page-item.active a,
.circleStyle .bar .pagination li.page-item span{
    border-radius: 50%!important;
    margin: 0 2px;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    font-size: 1.25em;
}

.circleStyle .bar .pagination li.page-item .page-link.actived{
    background: rgba(89, 195, 225, 1);
    color: #fff !important;
}

.transcript .blue-title {
    background-color: #61c4e3;
    padding: 15px 0 10px;
}

.transcript .blue-title h2 {
    color: white;
    font-size: 16px;
    font-weight: 400;
}

.search-popup {
    top: 50%;
    transform: translate(-50%, -70%);
    left: 50%;
    z-index: 2147483647;
    background-color: #fafafa;
    width: 730px;
    border-radius: 5px;
    height: 530px;
    box-shadow: 0px 0px 2px gray;
    display: none;
}

.search-popup.showsearchpopup,
.showsearchpopup {
    display: block !important;
}

.search-popup .close {
    border: 1px solid #70a8ac;
    border-radius: 50%;
    padding: 3px;
    width: 33px;
    transform: translate(-56%, 56%);
    height: 33px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-popup header {
    height: 60px;
}

.search-popup .close .bx {
    color: #70a8ac;
    font-size: 20px;
}

.search-popup .area {
    width: 80%;
    display: block;
    padding: 40px;
    margin: -20px auto auto auto;
    background-color: white;
}

.search-popup .input-area {
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    margin-bottom: 12px;
}

.search-popup .input-area:nth-of-type(6) {
    margin-bottom: 0px;
}

.search-popup .input-area select {
    border: 1px solid #c8e1f2;
    color: #324158;
    font-size: 16px;
    width: 300px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
}

.search-popup .input-area select:hover {
    background-color: #ecf4fc;
}

.search-popup .input-area span {
    color: #31353d;
    font-size: 16px;
    display: block;
    width: 150px;
}

.search-popup .button {
    width: 100%;
    margin-top: 16px;
}

.search-popup .button button {
    display: block;
    width: 300px;
    padding: 10px;
    border: none;
    transition: 0.2s;
    border-radius: 6px;
    background-color: #afe0f0;
    color: white;
    margin: auto;
    font-size: 17px;
}

.search-popup .button button .bx {
    font-size: 20px;
    transform: translateY(15%);
}

.search-popup .button button:hover {
    background-color: #64c3e1;
}

/* mypage */

.page-menu {
    position: relative;
}

.page-menu a.button {
    position: absolute;
    right: 270px;
    top: 50%;
    font-size: 14px;
    color: #3d9be9;
    border-radius: 10px;
    border: 1px solid #3d9be9;
    padding: 10px;
    transform: translateY(-50%);
    text-decoration: none;
    width: 140px;
    transition: 0.3s;
    letter-spacing: 1.5px;
    text-align: center;
}

.page-menu a.button:hover {
    color: black;
    border: 1px solid black;
}

.my-page header {
    height: 285px;
    display: flex;
    align-items: center;
    margin-top: -27px;
    justify-content: flex-start;
}

.my-page header .container {
    background-color: transparent;
}

.my-page header .container .area {
    padding: 0 25px !important;
}

.my-page header .container .image {
    border-radius: 50%;
    height: 160px;
    width: 160px;
    position: relative;
}

.my-page header .container .image .icon {
    background-color: orange;
    border-radius: 50%;
    display: flex;
    position: absolute;
    right: 0;
    align-items: center;
    justify-content: center;
    bottom: 0px;
    width: 43px;
    cursor: pointer;
    height: 43px;
    transition: 0.3s;
}

.my-page header .container .image .icon:hover {
    box-shadow: 0px 0px 10px #80808086;
}

.my-page header .container .image .icon .bx {
    color: white;
    font-size: 25px;
}

.my-page header .container .image img {
    border-radius: 50%;
    width: 100%;
}

.my-page header .container .name {
    width: 24%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 29px;
}

.my-page header .container .name span {
    color: #222222;
    font-size: 23px;
    font-family: Helvetica, sans-serif !important;
    font-weight: 300 !important;
}

.my-page header .container .numbers {
    width: 60%;
    justify-content: space-between;
    align-items: center;
}

.my-page header .container .numbers .item {
    text-align: center;
}

.my-page header .container .numbers .item span:nth-of-type(1) {
    font-size: 40px;
    color: #62c4e3;
    font-weight: 500;
    display: block;
    margin-bottom: 0px;
}

.my-page header .container .numbers .item span:nth-of-type(2) {
    font-size: 15px;
    color: #7c7c7c;
    display: block;
    letter-spacing: 2px;
}

.my-page .container .larg,
.my-page .container .carousel-area,
.my-page .container,
.my-page .container-mobile {
    background-color: transparent !important;
}

.my-page .container-1 {
    background-color: white !important;
    margin-top: 20px !important;
    padding: 30px 40px !important;
    margin-bottom: 30px !important;
}

.my-page .container-2 {
    padding: 30px 40px !important;
    margin-bottom: 30px !important;
    background-color: white !important;
}

.my-page .container .titl a.button {
    font-size: 14px;
    color: #3d9be9;
    border-radius: 10px;
    border: 1px solid #3d9be9;
    padding: 10px;
    text-decoration: none;
    width: 140px;
    height: 44px !important;
    transition: 0.3s;
    transform: translateY(-20%);
    letter-spacing: 1.5px;
    text-align: center;
}

.my-page .container-1 .titl a.button {
    /* display: none !important; */
}

.my-page .container-2 .titl a.button:hover {
    color: black;
    border: 1px solid black;
}

.my-page .container .titl h2 {
    color: #31353d !important;
    font-size: 23px !important;
    margin-bottom: 35px !important;
}

.my-page .container-2 .courses {
    margin-top: 30px !important;
}

.my-page .container-3 {
    padding: 30px 40px !important;
    background-color: white !important;
    margin-bottom: 30px !important;
}

.my-page .container-3 .latest-courses {
    margin-top: 40px;
}

.my-page .container-3 .carousel-numbers {
    margin-top: -20px !important;
}

.my-page .container-3 .container-3-buttons button {
    padding: 5px;
    border-radius: 40px;
    font-size: 12px !important;
    text-align: center;
    transition: 0.3s;
    background-color: #f6f6f6;
    color: #31353d !important;
    display: block;
    width: 80px;
    margin: 0 4px !important;
    border: none;
}

.my-page .container-3 .container-3-buttons button:hover {
    background-color: #5dc9e2 !important;
    color: white !important;
}

.my-page .container-3 .container-3-buttons button.blue {
    background-color: #5dc9e2 !important;
    color: white !important;
}

/* appointments */

.appointments .page-menu {
    margin-top: -27px !important;
    margin-bottom: 35px !important;
}

.appointments > .container {
    padding: 30px 35px !important;
}

.appointments > .container-1 {
    margin-bottom: 30px !important;
}

.appointments > .container h1 {
    font-size: 23px !important;
    color: #31353d !important;
    margin-bottom: 26px !important;
}

.appointments.init-appointments .container table tr td,
.appointments .container table.init-table tr td {
    border: none;
}
.appointments.init-appointments .container table tr td:nth-of-type(1),
.appointments .container table.init-table tr td:nth-of-type(1) {
    display: block;
    width: 16%;
}
.appointments.init-appointments .container table tr th:nth-of-type(1),
.appointments .container table.init-table tr th:nth-of-type(1) {
    display: block;
    width: 16%;
}
.appointments.init-appointments .container table tr td:nth-of-type(2),
.appointments .container table.init-table tr td:nth-of-type(2){
    display: block;
    width: 10%;
}
.appointments.init-appointments .container table tr th:nth-of-type(2),
.appointments .container table.init-table tr th:nth-of-type(2)  {
    display: block;
    width: 10%;
}
.appointments.init-appointments .container table tr td:nth-of-type(3),
.appointments .container table.init-table tr td:nth-of-type(3) {
    display: block;
    width: 13%;
}
.appointments.init-appointments .container table tr th:nth-of-type(3),
.appointments .container table.init-table tr th:nth-of-type(3) {
    display: block;
    width: 13%;
}
.appointments.init-appointments .container table tr td:nth-of-type(4),
.appointments .container table.init-table tr td:nth-of-type(4) {
    display: block;
    width: 50%;
}
.appointments.init-appointments .container table tr th:nth-of-type(4),
.appointments .container table.init-table tr th:nth-of-type(4) {
    display: block;
    width: 50%;
}
.appointments.init-appointments .container table tr td:nth-of-type(5),
.appointments .container table.init-table tr td:nth-of-type(5) {
    display: block;
    width: 11%;
    text-align: center;
}
.appointments.init-appointments .container table tr th:nth-of-type(5),
.appointments .container table.init-table tr th:nth-of-type(5) {
    display: block;
    width: 11%;
    text-align: center;
}
.appointments.init-appointments .container table tr,
.appointments .container table.init-table tr {
    margin: 10px 0 !important;
    display: flex;
    justify-content: space-between;
}

.appointments .container .table-1 tr:nth-of-type(4) {
    margin: 0px 0 !important;
}

.appointments .container .table-2 tr:nth-of-type(11) {
    margin: 0px 0 !important;
}

.appointments.init-appointments .container table tr:nth-of-type(1),
.appointments .container table.init-table tr:nth-of-type(1){
    background-color: #f1f9f9 !important;
    border-top: 4px solid #c8ece8 !important;
}
.appointments .container table tr td {
    font-size: 13px !important;
    color: #373c47 !important;
}

.appointments .container table tr td button {
    border: 1px solid #c4e4f4;
    padding: 3px;
    width: 80px;
    background-color: transparent;
    border-radius: 5px;
    transition: 0.2s;
}

.appointments .container table tr td button:hover {
    background-color: #5dbbd7;
    color: white;
}

.appointments .container table tr th {
    font-size: 13px !important;
    color: #373c47 !important;
}

.appointments .container .calendar-button {
    border: 1px solid #c4e4f4;
    padding: 6px 12px;
    border-radius: 6px;
    color: #777777;
    height: 45px !important;
    font-size: 15px;
    cursor: pointer;
    width: 210px;
    align-items: center;
    justify-content: space-between;
}

.appointments .container .calendar-button:hover {
    background-color: #eaf7ff;
}

.appointments .container .search {
    border: 2px solid #c4e4f4;
    padding: 6px 12px;
    border-radius: 30px;
    color: #777777;
    height: 45px !important;
    font-size: 15px;
    margin-left: 15px;
    display: flex;
    cursor: pointer;
    width: 210px;
    align-items: center;
    justify-content: space-between;
}

.appointments .container .search input {
    border: none;
    outline: none;
}

.appointments .container .calendar-button input {
    border: none;
}

.appointments .container .calendar-button .bx {
    font-size: 20px;
    color: #777777;
}

.appointments .container .date-picker {
    left: 63% !important;
    top: 40% !important;
}

#apbackground {
    width: 100% !important;
    height: 100% !important;
    background-color: #00000033;
    top: 0;
    left: 0;
    display: none;
    z-index: 2147483647;
}

#apbackground.show {
    display: block !important;
}

.apPopup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px #3f3f3f;
    width: 590px;
    display: none;
    z-index: 2147483647;
}

.apPopup.showAp {
    display: block !important;
}

.apPopup .content .closeap {
    position: absolute;
    right: 0;
    top: 0;
    width: 26px !important;
    display: flex;
    padding: 17px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 26px !important;
    border-radius: 50%;
    border: 2.5px solid #8bbfc2;
}

.apPopup .content .closeap .bx {
    color: #8bbfc2;
    font-size: 25px;
}

.apPopup .content h1 {
    font-size: 23px;
    color: #31353d;
    padding-top: 30px;
    text-align: center;
}

.apPopup .content h2 {
    font-size: 13px;
    color: #919191;
    text-align: center;
}
.apPopup.period-Popup .content h2{position:relative}

.apPopup .content .input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.apPopup .content .input input {
    outline: none;
    border: 1px solid #71a7dd;
    padding: 5px 0 10px 10px;
    width: 65%;
    height: 30px;
    border-radius: 3px;
    display: block;
    margin: 0 10px;
}

.apPopup .content .input input::placeholder {
    font-size: 13px !important;
    color: #3a3a3a;
}

.apPopup .content .input .icon {
    border: 1px solid #5dbbd7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    transition: 0.3s;
    height: 30px;
}

.apPopup .content .input .icon:hover {
    background-color: #5dbbd7;
}

.apPopup .content .input .icon:hover .bx {
    color: white;
}

.apPopup .content .input .icon .bx {
    color: #5dbbd7;
}

.apPopup .content .input span {
    color: black;
    font-size: 13px;
}

.apPopup .content .input input:hover {
    background-color: #eaf7ff;
}

.apPopup .content ul li {
    color: #373c47;
    margin: 3px 0;
    font-size: 13px;
}

.apPopup .content .image .name {
    color: #62c4e3;
    font-size: 13px;
}

.apPopup .content .image span {
    color: #7f808a;
    font-size: 13px;
}

.apPopup .content .text {
    padding: 0 30px 25px 30px;
}

.apPopup .content .text .image {
    width: 25%;
    text-align: center;
    padding-top: 10px;
}

.apPopup .content .text .image img {
    width: 90px;
    height: 90px;
    display: block;
    margin: auto auto 15px auto;
    border-radius: 50%;
}

.apPopup .content .text ul {
    width: 75%;
    padding: 0 0 0 20px;
}

.appointments .container .titl-2 .search-mobile {
    display: none !important;
}

.apPopup .content .text .image br {
    display: none !important;
}

/* settings page */

.settings .page-menu {
    margin-top: -27px !important;
}

.settings .container .date-button {
    height: 30px !important;
}

.settings .container-1 {
    background-color: #fafafa !important;
    padding: 0px !important;
}

.settings .container-2 {
    margin-bottom: 20px !important;
}

.settings .container-3 {
    margin-bottom: 55px !important;
}

.settings .container .image {
    padding-bottom: 20px !important;
}

.settings .container header,
.settings .container .nt {
    padding: 20px 20px 15px 20px !important;
}

.settings .container .text span {
    font-size: 15px;
    color: #7f808a;
    display: inline-block !important;
}

.settings .container .text span:nth-of-type(1) {
    margin-right: 60px;
    margin-bottom: 5px;
}

.settings .container .check {
    align-items: center;
}

.settings .container .check span {
    color: #7f808a;
    font-size: 15px;
    display: inline-block;
    margin-left: 5px;
}

.settings .container .check .bx {
    color: #63d189 !important;
    font-size: 20px !important;
}

.settings .container header {
    border-bottom: 1px dotted #bdbdbd;
}

.settings .container .nt {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.settings .container .num {
    transform: translateY(25%) !important;
}

.settings .container .nt .image img {
    width: 120px;
    margin-right: 23px;
    font-size: 15px;
    color: #7f808a;
}

.settings .container .nt .image span {
    color: #7f808a;
    display: block;
}

.settings .container .date-picker {
    left: 90% !important;
    top: 75% !important;
}

.settings .container .text .text-icon {
    display: none !important;
}

.settings .container .span-3:nth-of-type(2) {
    display: none !important;
}

/* settings 2 */

.settings-2 .container {
    background-color: #fafafa !important;
}

.settings-2 .container h1 {
    color: #31353d;
    font-size: 23px;
    padding-left: 20px;
}

.settings-2 .container .form {
    width: 80% !important;
}

.settings-2 .container .form section {
    width: 100% !important;
}

.settings-2 .container .form section .image {
    width: 20% !important;
}

.settings-2 .container .form section img {
    width: 100% !important;
    height: 116px !important;
    object-fit: cover;
}

.settings-2 .container .form section {
    margin-bottom: 10px;
    padding: 20px 0 !important;
    background-color: white !important;
}

.settings-2 .container .form section .info {
    /* width: 80% !important; */
    padding-left: 11px;
    flex-grow: 1;
}

.settings-2 .container .form section .info h2 {
    font-size: 15px;
}

.settings-2 .container .form section .info h2:nth-of-type(1) {
    color: #FD7E14;
    font-size: 13px;
}

.settings-2 .container .form section .info h2:nth-of-type(2) {
    color: #324158;
}

.settings-2 .container .form .info .details {
    display: flex;
    justify-content: space-between;
}

.settings-2 .container .form .info .details .detail {
    width: 40%;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    /* cursor: pointer; */
}

.settings-2 .container .form .info .details .detail-2 {
    display: flex !important;
    justify-content: flex-end;
    padding-right: 40px;
}

.settings-2 .container .form .info .details .detail span {
    font-size: 12px;
    color: #7f808a;
}

.settings-2 .container .form .info .details .detail span:nth-child(1) {
    margin-right: 25px;
}

.settings-2 .container .form .info .details .detail-2 span:nth-of-type(2) {
    font-size: 15px;
    color: #ff4040;
}

.settings-2 .container .form .info .details .detail span .bx {
    font-size: 19px;
    color: #7f808a;
    margin-right: 5px;
    transform: translateY(20%);
}

.settings-2 .container .form .info .details .detail .del {
    text-decoration: line-through;
}

.settings-2 aside {
    border: 1px solid #cecece !important;
    padding: 15px 12px;
    width: 23% !important;
    height: 320px !important;
}

.settings-2 aside .cont h2 {
    font-size: 17px;
    color: #31353d;
    margin-bottom: 10px;
}

.settings-2 aside .cont .line span {
    color: #31353D;
    font-size: 15px;
}

.settings-2 aside .cont .line .underline {
    text-decoration: underline;
}

.settings-2 aside .cont .line-2 span {
    color: #31353D !important;
}

.settings-2 aside .cont .line:nth-of-type(1) {
    margin: 5px 0;
}

.settings-2 aside .cont .input {
    border: none !important;
    width: 100% !important;
    margin: 10px 0;
}

.settings-2 aside .cont .input input {
    padding: 6px 10px !important;
    border-radius: 6px !important;
    width: 65% !important;
    border: 1px solid #CCCCCC !important;
    color: #727272;
    outline: none;
}
.settings-2 aside .cont .input input:focus {
    border-color: #59C3E1 !important;
    box-shadow: 0 0 0 0.25rem rgba(98, 196, 227, .25);
}

.settings-2 aside .cont .input button {
    background-color: black;
    padding: 10px !important;
    border-radius: 6px !important;
    width: 31% !important;
    color: white !important;
    font-size: 15px !important;
}

.settings-2 aside .cont .line-top {
    border-top: 1px dotted #cecece;
    width: 100%;
    margin: 30px 0;
}

.settings-2 aside .cont .price {
    margin-top: 10px !important;
}

.settings-2 aside .cont .price span {
    font-size: 20px;
    color: #59C3E1;
}

.settings-2 aside .cont .price button {
    background-color: #59C3E1 !important;
    color: white !important;
    border: none;
    display: block;
    padding: 10px;
    transition: 0.3s;
    margin-top: 10px;
    width: 100%;
    border-radius: 6px;
}

.settings-2 aside .cont .price button:hover {
    background-color: #5dc9e2 !important;
}

.settings-2 .container .details-mobile {
    display: none !important;
}

/* terms */

.terms .container {
    padding: 35px !important;
}

.terms .container h1,
.terms .container h2 {
    text-align: center;
    font-size: 22px !important;
    color: #373c47;
    margin-bottom: 15px;
}

.terms .container p {
    padding: 0px !important;
    margin: 0px !important;
    color: #31353d;
}

.terms .container a {
    color: #31353d;
    text-decoration: underline !important;
}

.terms .container .list-1 {
    list-style: none !important;
}

.terms .container ol,
.terms .container ul {
    padding: 0 15px;
    margin: 0px;
}

.terms .container ol ul {
    list-style: none;
}

.terms .container .list-1 li::before {
    content: "1. ";
}

/* join us */

.join-us > header {
    background-image: url("../images/join-us-header.png");
    background-color: #ececea;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: relative;
    height: 700px;
}

.join-us header .content {
    position: absolute;
    top: 43%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 790px;
    height: 300px;
}

.join-us header .content h1 {
    color: #1d3e53;
    font-size: 49px;
    transform: translateX(3%);
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 15px;
}

.join-us header .content h2 {
    color: #1d3e53;
    text-align: right !important;
    font-size: 33px;
    margin-bottom: 25px;
    font-weight: 300 !important;
}

.join-us header .content .bt {
    color: white;
    background-color: #1d3e53 !important;
    border-radius: 4px;
    padding: 12px;
    display: block;
    text-decoration: none;
    width: 110px;
    border: none;
    margin: auto;
    cursor: poiner;
    font-size: 15px;
    transform: translateX(100%);
}

.join-us > .content h2 {
    font-size: 35px !important;
    color: #686369 !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.5;
    margin: 120px auto 40px auto !important;
    display: block !important;
}

.join-us > .content h2::after {
    display: none !important;
}

.join-us > .content h3 {
    font-size: 25px !important;
    text-align: center !important;
    color: #616156 !important;
    text-align: center !important;
}

.join-us > .content .icons {
    margin: 80px auto !important;
    max-width: 1000px !important;
}

.join-us > .content .icons .icon span {
    display: block !important;
    font-size: 24px !important;
    text-align: center !important;
    margin-top: 30px !important;
}

.join-us > .content .icons .icon img {
    display: block !important;
    margin: auto !important;
    width: 100px !important;
}

.join-us > .content .circle-icons {
    max-width: 1000px;
    margin: 380px auto auto auto !important;
    padding: 0 45px;
}

.join-us > .content .circle-icons .icon {
    border: 2px solid #62c4e3;
    border-radius: 50%;
    display: flex;
    width: 255px;
    justify-content: center;
    align-items: center;
    height: 255px;
}

.join-us > .content .circle-icons .c-icons:nth-of-type(1) {
    margin-bottom: 50px;
}

.join-us > .content .circle-icons .c-icons:nth-of-type(1) .icon:nth-of-type(2) {
    transform: translateY(-35%);
}

.join-us > .content .circle-icons .c-icons:nth-of-type(2) .icon:nth-of-type(2) {
    transform: translateY(25%);
}

.join-us > .content .circle-icons .icon .text h3 {
    font-size: 26px;
    color: #62c4e3;
}

.join-us > .content .circle-icons .icon .text p {
    font-size: 16px;
    color: #858585;
}

.join-us > .content .circle-icons .icon .ico {
    bottom: 20px !important;
    right: -20px;
}

.join-us > .content .circle-icons .icon .image {
    background-color: white !important;
    width: 100px;
    padding: 10px;
    border-radius: 50%;
    overflow: hidden;
}

.join-us > .content .circle-icons .icon .image img {
    width: 100%;
}

.join-us > .content .circle-icons .icon .number {
    font-display: nana;
}

.join-us > .content .circle-icons .icon .number span {
    font-size: 60px !important;
    font-family: "Poppins", sans-serif;
    color: #62c4e3;
    font-weight: 200 !important;
}

.join-us > .content .circle-icons .icon .text {
    text-align: justify !important;
    display: block;
    margin: 0 15px 0 45px;
    transform: translateX(-29%) !important;
    width: 120px;
}

.join-us > .content .circle-icons .icon .text h3 {
    font-size: 26px !important;
    color: #62c4e3 !important;
}

.join-us .content .psic {
    background-color: #5dbbd7 !important;
    height: 500px;
    margin-top: 200px !important;
}

.join-us .content .psic .cont {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    margin: auto !important;
}

.join-us .content .psic .cont ul {
    padding: 0;
    margin: 0;
}

.join-us .content .psic .cont ul li {
    color: white !important;
    font-size: 16px !important;
    margin-left: 35px;
    margin-bottom: 12px !important;
}

.join-us .content .psic .cont h2 {
    font-size: 26px !important;
    color: white !important;
    text-align: left !important;
    margin: 100px auto 30px auto !important;
    padding: 0px !important;
}

.join-us .content .call {
    background-image: url("../images/join-us-footer.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 500px;
    position: relative;
}

.join-us .content .call .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

.join-us .content .call .content h3 {
    color: white !important;
    font-size: 23px !important;
    margin-bottom: 30px !important;
}

.join-us .content .call .content button {
    font-size: 15px;
    background-color: #5dbbd7 !important;
    color: white;
    padding: 12px;
    width: 300px;
    border: none;
    margin: auto !important;
}

.join-us .content .call .content button:hover {
    background-color: #51afcc !important;
}

.join-us > .content .circle-icons-mobile {
    display: none;
}

/* identity*/

.identity .stages .container .d-flex .stage .stgray {
    background-color: #bdbdbd !important;
}

.identity .stages .container .d-flex .stage-text .stgray {
    color: #bdbdbd !important;
}

.identity header .stages .stage::after {
    background-color: #bdbdbd !important;
}

.identity .section {
    margin-top: 190px !important;
}

.identity .section .container {
    padding: 0 40px !important;
}

.identity .section .container .sec {
    width: 433px;
    border-radius: 6px;
    background-color: white;
    height: 310px !important;
    text-align: center !important;
}

.N-chooseType .section .container .sec{
    width: 50%;
}

.N-chooseType .section .container .btn-id{
    margin: 50px auto -50px auto;
}

.identity .section .container .sec .image {
    width: 115px;
    height: 115px;
    margin: auto;
}

.identity .section .container .sec .image img {
    width: 100%;
    border-radius: 50%;
    margin-top: -50px;
}

.identity .section .container .btn-id {
    width: 300px;
    height: 42px;
    border-radius: 3px;
    background-color: #aee1ed !important;
    text-align: center;
    padding: 10px;
    transition: 0.3s;
    /* margin: 50px auto -50px auto; */
}

.identity .section .container .btn-id:hover {
    background-color: #61c4e3 !important;
}

.identity .section .container a {
    color: white !important;
    text-decoration: none !important;
    font-size: 15px;
}

.identity .section .container .sec h3 {
    font-size: 20px;
    color: #31353d;
    font-weight: 600;
    margin-top: -25px;
}

.identity .section .container .sec span {
    font-size: 13px;
    color: #7c7c7c;
    display: block;
    margin-top: -7px;
}

.identity .section .container .sec p {
    color: #31353d;
    font-size: 16px;
    display: block;
    margin: 11px auto 30px auto;
    width: 55%;
}

.identity .section .container .sec .bx {
    color: #61c4e3;
    cursor: pointer;
    font-size: 43px;
}

.identity .identpopup {
    position: fixed;
    top: 50%;
    width: 585px;
    height: auto;
    padding: 25px;
    border-radius: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fafafa;
    z-index: 2147483647;
    box-shadow: 0px 0px 3px gray;
    display: none;
}

.identity .identpopup .cont {
    background-color: white;
    border-radius: 5px;
    padding: 15px 20px;
    border-radius: 8px;
}

.identity .identpopup h1 {
    font-size: 23px;
    color: #373c47;
    margin-bottom: 20px;
}

.identity .identpopup ul li h2 {
    color: #31353d;
    font-size: 14px;
}

.identity .identpopup ul li p {
    color: #31353d;
    font-size: 14px;
}

.identity .identpopup ol li {
    color: #31353d;
    font-size: 14px;
}

.identity .identpopup ul li p.blue {
    color: #62c4e3;
}

.identity .identpopup ul li p.yellow {
    color: orange;
}

.identity .identpopup .closeIdent {
    border: 1px solid #51afcc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    cursor: pointer;
    top: -30px;
    right: -30px;
    align-items: center;
    justify-content: center;
}

.identity .identpopup .closeIdent .bx {
    color: #51afcc;
    font-size: 25px;
}

.identity .identpopup.showIDpop {
    display: block !important;
}

/* form page */

.form-page > .container {
    margin: 125px auto 0 auto !important;
    padding: 10px !important;
}

.form-page > .container form {
    background-color: white !important;
    padding: 30px 40px !important;
}

.form-page > .container form h1 {
    color: #31353d !important;
    font-size: 23px !important;
    margin-bottom: 25px !important;
}

.form-page > .container form h3 {
    color: #7f808a !important;
    font-size: 15px !important;
    margin-top: 20px !important;
}
/*
.form-page > .container form h3:nth-of-type(2) {
    margin-top: 40px !important;
}

.form-page > .container form h3:nth-of-type(3) {
    margin-top: 35px !important;
}

.form-page > .container form h3:nth-of-type(4) {
    margin-top: 45px !important;
    margin-bottom: 20px;
}

.form-page > .container form h3:nth-of-type(5) {
    margin-top: 45px !important;
} */

.form-page > .container form .input {
    display: flex;
    align-items: center;
}

.form-page > .container form .input input {
    width: 16px !important;
    height: 16px !important;
    margin-right: 14px !important;
    display: block;
    margin: 8px 0;
}

.form-page > .container form label {
    color: #31353D !important;
    font-size: 15px !important;
}

.form-page > .container form .btns {
    margin-right: 40px !important;
}

.form-page > .container form .btns button {
    color: #31353d !important;
    font-size: 15px !important;
    border-radius: 50px;
    background-color: transparent;
    display: block !important;
    padding: 8px !important;
    border: 1px solid #b4d7ec;
    width: 200px;
    transition: 0.3s;
}

.form-page > .container form .btns button:hover {
    background-color: #62c4e3 !important;
    color: white !important;
}

.form-page > .container form > button {
    font-size: 14px !important;
    color: white !important;
    background-color: #62c4e3;
    border: 1px solid #62c4e3;
    border-radius: 3px;
    padding: 10px;
    width: 100%;
    transition: 0.3s;
    display: block;
    margin-top: 50px;
}

.form-page > .container form > button:hover {
    background-color: transparent;
    color: #62c4e3 !important;
}

.form-page > .container form > button .bx {
    font-size: 17px;
    margin-right: 6px;
}

.form-page > .container form textarea {
    border: 1px solid #b4d7ec;
    background-color: white;
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    height: 70px;
    border-radius: 4px;
}

.form-page > .container form textarea:hover {
    background-color: #eaf7ff;
    border: 1px solid #eaf7ff;
}

/* subscription */

.subscription > .container form h1 {
    margin-bottom: 40px !important;
}

.subscription > .container form .right {
    padding-left: 30px !important;
    padding-top: 60px !important;
}

.subscription > .container form .left {
    padding-right: 30px !important;
}

.subscription > .container form .first-area {
    margin-bottom: 30px !important;
}

.subscription > .container form .input input,
.subscription > .container form .input select {
    width: 100% !important;
    padding: 10px;
    display: block !important;
    margin-right: 0px !important;
    height: 47px !important;
    border-radius: 5px !important;
    border: 1px solid #b4d7ec !important;
}

.subscription > .container form .input select {
    cursor: pointer;
}

.subscription > .container form .input input:hover {
    background-color: #eaf7ff;
}

.subscription > .container form .input select:hover {
    background-color: #eaf7ff;
}

.subscription > .container form .left .circle-image {
    border-radius: 50%;
    display: block;
    padding: 20px;
    display: flex;
    width: 160px;
    height: 160px;
    align-items: center;
    transform: translateX(75%) !important;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: -10px !important;
}

.subscription > .container form .left .circle-image img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid #cecece;
}

.subscription > .container form .left .circle-image .circle-icon {
    background-color: orange !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    right: 3px;
    bottom: 3px;
    width: 40px;
    transition: 0.2s;
    height: 40px;
    border-radius: 50%;
}

.subscription > .container form .left .circle-image .circle-icon .bx {
    font-size: 23px;
    color: white;
}

.subscription > .container form .left .circle-image .circle-icon:hover {
    box-shadow: 0px 0px 2px #808080;
}

.subscription > .container form .btn-white {
    background-color: transparent !important;
    color: #31353d !important;
    display: block !important;
    margin-top: 20px !important;
    border: 1px solid #b4d7ec !important;
}

.subscription > .container form .btn-white:hover {
    color: white !important;
    background: #61c4e3 !important;
    border: 1px solid #61c4e3 !important;
}

.subscription > .container form .titm {
    margin-top: 50px !important;
}

.subscription > .container form .btns button {
    width: 133px !important;
    margin: 5px 10px 5px 0;
}

.subscription > .container form .subscribe-buttons button {
    font-size: 14px !important;
    color: white !important;
    background-color: #62c4e3;
    border: 1px solid #62c4e3;
    border-radius: 3px;
    padding: 10px;
    transition: 0.3s;
    display: block;
    margin-top: 50px;
    width: 47% !important;
    display: block !important;
}

.subscription > .container form .subscribe-buttons button:nth-of-type(1) {
    background-color: #cccccc !important;
    border: 1px solid #ccc !important;
}

.subscription > .container form .subscribe-buttons button:hover {
    background-color: transparent !important;
    color: #62c4e3 !important;
    border: 1px solid #62c4e3 !important;
}

/* expert */

.expert .page-menu {
    margin-top: -27px !important;
}

.expert > .container-1 {
    background-color: #fafafa !important;
}

.expert .container > header {
    background-color: #eaf7ff !important;
    padding: 30px 35px !important;
    overflow: hidden;
    height: 95px !important;
    margin: 12px 0 !important;
    border-radius: 5px !important;
}

.expert .container > header .image {
    flex-direction: column !important;
    text-align: center !important;
    margin-right: 30px;
}

.expert .container > header .image img {
    display: block !important;
    margin: auto auto auto auto !important;
    width: 40px !important;
}

.expert .container > header .image span {
    color: #737373;
    font-size: 12px;
    display: block;
}

.expert .container > header .text h3 {
    color: #737373;
    font-size: 15px;
    display: block;
    margin: 15px 0 10px 0;
}

.expert .container > header .text p {
    color: #737373;
    font-size: 15px;
}

.expert .container > .header-1 {
    margin-top: 15px !important;
}

.expert .container > .header-2 {
    background-color: #eeeeee !important;
}

.expert .container-sec {
    padding: 30px 60px !important;
    margin-bottom: 30px;
}

.expert .container-sec .sec-1 {
    width: 100% !important;
}

.expert .container-sec .sec-1 div > span {
    display: block;
    margin-right: 40px !important;
    transform: translateY(20%) !important;
}

.expert .container-sec .sec-1 button {
    color: white !important;
    font-size: 15px !important;
    border: none;
    padding: 11px !important;
    border-radius: 4px !important;
    width: 145px;
    background-color: #61c4e3 !important;
}

.expert .container-sec .sec-1 button.whitebtn {
    background-color: transparent !important;
    border: none !important;
    font-size: 15px !important;
    transition: 0.3s !important;
    width: 165px;
    color: #ccc !important;
}

.expert .container-sec .sec-1 button.whitebtn span {
    display: inline-block !important;
    transform: translateY(-15%) !important;
    transition: 0.3s !important;
    font-size: 15px !important;
}

.expert .container-sec .sec-1 button.whitebtn a {
    text-decoration: none !important;
    color: #ccc !important;
}

.expert .container-sec .sec-1 button.whitebtn:hover {
    background-color: transparent !important;
}

.expert .container-sec .sec-1 button.whitebtn:hover span {
    transform: scale(105%) !important;
    color: #31353d !important;
    transform: translateY(-20%) !important;
}

.expert .container-sec .sec-1 button.whitebtn:hover span a {
    color: #31353d !important;
}

.expert .container-sec .sec-1 button.whitebtn .bx {
    color: #61c4e3 !important;
    font-size: 25px !important;
    margin-left: 10px !important;
}

.expert .container-sec h4 {
    color: #858585 !important;
    font-size: 15px !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

.expert .container-sec .sec-1 button:hover {
    background-color: #5dbbd7 !important;
}

.expert .container-sec .spans {
    margin-bottom: 15px !important;
}

.expert .container-sec .date-picker-button {
    right: 0px !important;
    padding: 9px !important;
}

.expert .container-sec div .date-picker {
    left: 780px !important;
}

.expert .container-sec .spans span {
    font-size: 15px;
    color: #737373;
}

.expert .container-sec .spans .red {
    color: #ff9496;
}

.expert .container-sec h2 {
    color: #31353d;
    font-size: 23px;
    text-align: center;
    margin-bottom: 15px !important;
}

.expert .container-sec h3 {
    font-size: 15px;
    color: #373c47;
}

.expert .container-sec div .text span {
    color: #91d6eb;
    font-size: 40px;
}

.expert .container-sec div .text span span {
    font-size: 25px;
}

.expert .container-sec div .text ul {
    padding: 0px;
    margin: 0px;
}

.expert .container-sec div .text ul li {
    color: #7f808a;
    font-size: 12px;
}

.expert .container-sec .line {
    border-top: 1px dotted #cecece;
    width: 100%;
    margin: 15px 0;
}

/* my page 2 */

.my-page-2 > header {
    background-color: #f1f9f9 !important;
}

.my-page-2 header .container .area .numbers .item span span {
    font-size: 20px !important;
}

.my-page-2 header .container .area .name span:nth-of-type(2) {
    text-align: right !important;
    color: black !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.my-page-2 .container .courses-list .course-list {
    border: 1px solid #cecece;
    height: 78px;
    padding: 10px;
    margin-bottom: 5px;
}

.my-page-2 .container .courses-list .course-list .image {
    width: 93px;
    /* overflow: hidden; */
    /* height: 100%; */
    background-color: orangered !important;
    margin-right: 10px !important;
}

.my-page-2 .container .courses-list .course-list .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-page-2 .container .courses-list .course-list .tit {
    font-size: 15px;
    color: #7f808a;
    margin-bottom: 5px;
}

.my-page-2 .container .courses-list .percent {
    width: 165px;
}

.my-page-2 .container .courses-list .percent .bar {
    width: 100%;
    border: 0.01rem solid #62c4e3;
    position: relative;
    height: 12px;
    margin-top: 2px;
    border-radius: 50px;
}

.my-page-2 .container .courses-list .percent .bar::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    height: 3px;
    background-color: #b7f4ec;
    /* width: 70% !important; */
}

.my-page-2 .container .courses-list .percent .data span:nth-of-type(1) {
    font-size: 13px !important;
    color: #7f808a;
    padding-left: 6px;
}

.my-page-2 .container .courses-list .percent .data span:nth-of-type(2) {
    font-size: 13px !important;
    color: #62c4e3;
    padding-right: 6px;
}

.my-page-2 .container .courses-list .course-list .icons {
    justify-content: space-between !important;
    width: 260px;
}

.my-page-2 .container .courses-list .course-list .icons .icon {
    align-items: center;
    cursor: pointer;
}

.my-page-2 .container .courses-list .course-list .icons .icon span {
    font-size: 12px;
    color: #7f808a;
}

.my-page-2 .container .courses-list .course-list .icons .icon .bx {
    font-size: 20px;
    color: #7f808a;
    transform: translateY(15%) !important;
    margin-right: 5px;
}

.my-page-2 .container .courses-list .eye {
    cursor: pointer;
}

.my-page-2 .container .courses-list .eye span {
    font-size: 12px;
    color: #7f808a;
    margin-left: 5px;
}

.my-page-2 .container .courses-list .eye .fa-eye {
    color: #62c4e3;
    font-size: 15px;
}

.my-page-2 .container .courses-list .course-list > .bx {
    color: #45d1b1 !important;
    font-size: 25px;
}

.my-page-2 .container .courses-list .course-list.course-list-mobile {
    display: none !important;
}

/* specialist */

.specialist header .specialist-table {
    background-color: white;
    padding: 10px !important;
    margin: 20px 0 0 !important;
    width: calc(75% - 200px);
    overflow: hidden;
}

.specialist-aside {
    background-color: #cfd3d6 !important;
    display: block !important;
    right: 0;
    top: 0;
    height: 100%;
    width: 325px;
    padding: 20px;
    transition: 0.3s;
    transform: translateX(105%);
    z-index: 2147483647 !important;
}

.specialist-aside.show-table {
    transform: translateX(0%) !important;
}

.specialist-aside .content h2 {
    padding-top: 30px;
    display: block;
    font-size: 13px;
    color: black;
}

.specialist-aside .content ul {
    padding: 0px;
    margin-left: 20px;
    margin-top: -8px;
    margin-bottom: 28px;
}

.specialist-aside .content ul li {
    font-size: 13px;
    color: black;
}

.specialist-aside .content .close {
    padding: 11px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    height: 24px;
    right: 0px;
    cursor: pointer;
    width: 24px;
    justify-content: center;
}

.specialist-aside .content .close .bx {
    color: white !important;
    font-size: 24px !important;
}

.specialist-aside .content .block {
    background-color: white;
    padding: 12px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.specialist header .specialist-table .head {
    height: 35px;
    align-items: center;
}

.specialist header .specialist-table .head .arrows {
    width: 85px;
    justify-content: space-between;
    padding-right: 0px !important;
    margin-right: 10px;
}

.specialist-aside .content select {
    width: 100% !important;
    display: block !important;
    outline: none !important;
    border: none;
    margin-bottom: 10px;
    color: #7c7c7c !important;
    padding-bottom: 12px !important;
    font-size: 13px;
    border-bottom: 1px dotted gray !important;
}

.specialist-aside .content .text {
    justify-content: space-between;
}

.specialist-aside .content .text .titles {
    width: 75% !important;
    transform: translateY(-15%);
}

.specialist-aside .content .text button {
    height: 35px;
    width: 20%;
    border-radius: 6px;
    padding:0 10px;
    background-color: #62c4e3;
    color: white;
    font-size: 13px;
    border: none;
}

.specialist-aside .content .text button:hover {
    background-color: #5ebdd5;
}

.specialist-aside .content .text .titles span {
    width:50%;
}

.specialist-aside .content .text .titles span:nth-child(1){font-size:15px;width:calc(100% - 100px)}
.specialist-aside .content .text .titles span:nth-child(2){color:#ff4040;font-size:15px;text-align:right;
    width:100px;
}

.plan-memo{justify-content:space-between;margin-top:5px}
.plan-memo span{font-size:13px;width:calc(80% - 10px);margin-right:10px}

.specialist header .specialist-table .head .arrows .arrw {
    border: 1px solid #61c4e3;
    border-radius: 5px;
    width: 47%;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-top: 4px;
    transition: 0.2s;
    justify-content: center;
    height: 30px;
}

.specialist header .specialist-table .head .arrows .arrw:hover {
    background-color: #61c4e3;
}

.specialist header .specialist-table .head .arrows .arrw .bx {
    color: #61c4e3;
    font-size: 25px;
}

.specialist header .specialist-table .head .arrows .arrw:hover .bx {
    color: white !important;
}

.specialist header .specialist-table .head > span {
    font-size: 13px;
    color: black;
}

.specialist header .specialist-table table {
    margin-top: 3px;
}

.specialist header .specialist-table table tr {
    display: flex !important;
    justify-content: space-between !important;
}
.specialist header .specialist-table table tr td {
    display: inline-block;
    margin: 1px !important;
    width: 46.5px;
    height: 30px;
}
.specialist header .specialist-table table tr:nth-of-type(1) td {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
    border-top: 3px solid #b5f4e9;
    height: 53px;
}

#cfd3d6 .specialist header .specialist-table table tr:nth-of-type(1) td span {
    width: 100%;
    text-align: center;
    margin: auto;
    font-size: 13px;
}

.specialist header .specialist-table table tr td:nth-of-type(1) {
    width: 65px !important;
    font-size: 12px;
    color: #7c7c7c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.specialist header .specialist-table table tr td.blue {
    color: #62c4e3 !important;
}

.specialist header .specialist-table .button-tab {
    display: none !important;
}

.specialist > .container p {
    font-size: 15px !important;
    color: #31353d;
    line-height: 1.7;
    margin-bottom: 70px !important;
}

.specialist > .container ul {
    padding: 0px;
    margin-left: 20px;
    margin-bottom: 70px !important;
}

.specialist > .container ul li {
    font-size: 15px !important;
    color: #31353d;
    line-height: 1.7;
}

.specialist > .container .buttns button {
    background-color: #62c4e3;
    border: none;
    cursor: pointer;
    font-size: 15px;
    padding: 9px;
    margin: 2px 20px 20px 0;
    border-radius: 30px;
    width: 130px;
    color: white !important;
}

/* file fill */

.file-fill .container {
    padding: 35px 45px;
}

.file-fill .container h2 {
    font-size: 23px;
    color: #31353d;
}

.file-fill .container label {
    font-size: 15px;
    margin: 10px 0;
    color: #737373;
}

.file-fill .container input,
.file-fill .container select,
.file-fill .container textarea {
    border: 1px solid #CCCCCC !important;
    border-radius: 5px;
    color: #31353D;
    height: 40px;
    margin: 0 !important;
    padding: 10px;
    outline: none;
}
.file-fill .container input:hover,
.file-fill .container select:hover,
.file-fill .container textarea:hover {
    background-color: #FFFFFF !important;
    border-color: #CCCCCC !important;
}
.file-fill .container input:disabled,
.file-fill .container select:disabled,
.file-fill .container textarea:disabled {
    background-color: #f0f0f0;
}
.file-fill .container input:read-only,
.file-fill .container select:read-only,
.file-fill .container textarea:read-only {
    background-color: #f0f0f0;
    cursor: default;
}
.file-fill .container input:read-only:hover,
.file-fill .container select:read-only:hover,
.file-fill .container textarea:read-only:hover {
    background-color: #f0f0f0 !important;
}
.file-fill .container input:read-only:focus,
.file-fill .container select:read-only:focus,
.file-fill .container textarea:read-only:focus {
    border-color: #CCCCCC !important;
    box-shadow: none;
}
.file-fill .container input:focus,
.file-fill .container select:focus,
.file-fill .container textarea:focus {
    border-color: #62c4e3 !important;
    box-shadow: 0 0 0 0.25rem rgba(98, 196, 227, .25);
}
.file-fill .container .input-area input {
    width: 46.8%;
}

.file-fill .container select {
    width: 47% !important;
    font-size: 15px;
    cursor: pointer;
}

.file-fill .container textarea {
    height: 90px;
    display: block;
    width: 100%;
}

.file-fill .container .line {
    width: 100%;
    border-top: 1px solid #cecece;
    margin-bottom: 30px;
}

.file-fill .container .datepick {
    border: 1px solid #c8e1f6;
    border-radius: 5px;
    height: 45px;
    padding: 12px;
    cursor: pointer;
    outline: none;
    color: #7c7c7c;
    margin-bottom: 30px;
    font-size: 15px;
    width: 47%;
}

.file-fill .container .filebutton {
    border: 1px solid #c8e1f6;
    border-radius: 5px;
    transition: 0.3s;
    height: 45px;
    outline: none;
    font-size: 15px;
    color: #31353d;
    width: 100%;
    background-color: transparent;
    margin-bottom: 30px;
}

.file-fill .container select:hover {
    background-color: #eaf7ff !important;
}

.file-fill .container .filebutton:hover {
    background-color: #62c4e3 !important;
    color: white;
}

.file-fill .container input:hover {
    background-color: #eaf7ff;
}

.file-fill .container input::placeholder {
    color: #bac1c9;
}

.file-fill .container textarea:hover {
    background-color: #eaf7ff;
}

.file-fill .container .filebuttons {
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
}

.file-fill .container .filebuttons button {
    width: 47%;
    border: 1px solid #cccccc;
    border-radius: 5px;
    transition: 0.3s;
    height: 45px;
    outline: none;
    transition: 0.3s;
    font-size: 15px;
    color: #fff;
    background-color: transparent;
}

.file-fill .container .filebuttons button:nth-of-type(1) {
    background-color: #ccc;
}

.file-fill .container .filebuttons button:nth-of-type(2) {
    background-color: #62c4e3;
    border: 1px solid #62c4e3;
}

.file-fill .container .filebuttons button:hover {
    border: 1px solid #62c4e3;
    color: #62c4e3;
    background-color: transparent;
}

.file-fill .container .input-area .labelblock {
    display: none !important;
}

/* expert home */

.expert-home .container .titl .buttns button {
    margin-left: 15px;
    border-radius: 10px;
    background-color: transparent;
    border: 1px solid #3d9be9;
    height: 44px;
    padding: 7px;
    color: #3d9be9;
    transition: 0.3s;
    width: 140px;
    font-size: 14px;
}

.expert-home .container .titl .buttns button:hover {
    border: 1px solid black !important;
    color: black !important;
}

.expert-home .container > .content aside {
    background-color: white;
    width: 26%;
    border-top: 3px solid #b5f3e9;
    border-right: 1px solid #dedede;
    padding: 15px 10px;
    border-left: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.expert-home .container > .content aside h3 {
    font-size: 13px;
    color: black;
}

.expert-home .container > .content aside .bx-link-external {
    font-size: 25px;
    color: #c5e3fb;
}

.expert-home .container > .content .cont {
    width: 74%;
}

.expert-home .container > .content aside .input-area {
    margin-top: 5px;
    margin-bottom: 20px;
}

.expert-home .container > .content aside .input-area input {
    border: 1px solid #c5e3fb;
    padding: 6px;
    height: 30px;
    width: 83%;
    outline: none;
    border-radius: 3px;
}

.expert-home .container > .content aside .input-area input::placeholder {
    font-size: 13px;
}

.expert-home .container > .content aside .input-area .ico {
    border: 1px solid #c5e3fb;
    border-radius: 3px;
    height: 30px;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expert-home .container > .content aside .input-area .ico {
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
    color: #c5e3fb;
}

.expert-home .container > .content aside .input-area .ico:hover {
    background-color: #61c4e3;
}

.expert-home .container > .content aside .input-area .ico:hover .bx {
    color: white;
}

.expert-home .container > .content aside ul {
    padding: 0 0 0 25px;
}

.expert-home .container > .content aside ul li {
    color: #373c47;
    font-size: 13px;
}

.schedule header .key .key-bar .bx.iconone,
.iconone {
    display: none !important;
}

.schedule header .key .key-bar .bxs-minus-circle {
    display: none;
    left: 0 !important;
}

.schedule header .key .key-bar .bxs-minus-circle.icogray {
    color: #cecece !important;
    display: block !important;
}

.schedule .table {
    width: 665px !important;
    display: flex;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
    flex-direction: column !important;
}

.schedule .table .tr {
    display: flex !important;
    justify-content: space-between;
    margin-bottom: -10px !important;
}

.schedule .table .tr .td {
    width: 13.1% !important;
    display: inline-block !important;
}

.schedule .table .tr:nth-of-type(1) .td {
    border-top: 3px solid #b5f3e9;
}

.schedule .table .tr .td span {
    display: block;
    width: 100%;
    height: 25px !important;
    text-align: center;
}

.schedule .table .tr .td button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0 auto;
    border: 1px solid #c5e3fb;
    height: 30px;
    transition: 0.3s;
    width: 100%;
    font-size: 15px;
    color: #31353d;
}

.schedule .table > button {
    display: block;
    margin-top: 80px !important;
    transition: 0.3s;
    padding: 12px;
    text-align: center;
    border-radius: 5px;
    width: 300px;
    border: none;
    background-color: #aee1ee;
    color: white;
    margin: auto;
}

.schedule .table > button .bx {
    margin-right: 10px;
    font-size: 20px;
}

.schedule .table > button:hover {
    background-color: #61c4e3 !important;
}

.schedule .table .tr .td input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0 auto;
    border: 1px solid #c5e3fb;
    height: 30px;
    transition: 0.3s;
    text-align: center;
    width: 100%;
    font-size: 13px;
    color: #8c8c8c;
}

.schedule .table .tr .td button:hover {
    background-color: #61c4e3;
    color: white;
}

.apPopup-2 {
    padding: 15px 50px !important;
    width: 750px !important;
    overflow: hidden;
}

.apPopup-2 h1,
.apPopup-2 h2 {
    text-align: left !important;
}

.apPopup-2 h2 {
    margin-bottom: 20px !important;
}

.apPopup-3 {
    padding: 15px 50px !important;
    width: 750px !important;
    overflow: hidden;
}

.apPopup-3 h1,
.apPopup-3 h2 {
    text-align: left !important;
}

.apPopup-3 div > button,
.apPopup-edit-period div > button{
    background-color: transparent !important;
    border: 1px solid #3d9be9;
    color: #3d9be9;
    width: 135px;
    padding: 9px;
    font-size: 14px;
    border-radius: 10px;
    transform: translateY(-65%) !important;
}
.apPopup.apPopup-edit-period .content div.btn-submit-container button{transform:none !important;}

.apPopup-3 .content {
    background-color: white !important;
    padding: 10px !important;
}

.apPopup-3 .content form .input {
    border: 1px solid #cecece;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: auto;
}

.apPopup-3 .content form .input h3 {
    font-size: 13px;
    color: #919191;
    display: block;
    width: 100%;
}

.apPopup-3 .content form .input textarea {
    border: 1px solid #c4e3f6;
    display: block;
    width: 90%;
    outline: none;
    color: #00a6ff;
    margin: 10px auto 10px auto;
    height: 75px;
    padding: 10px;
}

.apPopup-3 .content form .input textarea:hover {
    background-color: #eaf7ff;
    border: none;
}

.apPopup-3 .content form .input textarea::placeholder {
    color: #b6c1cd;
}

.apPopup-3 .content form .input .labels {
    width: 80%;
    margin: auto auto 10px auto;
}

.apPopup-3 .content form .input .labels label {
    font-size: 14px;
    color: #919191;
}

.apPopup-3 .content form .input .inputs {
    width: 90% !important;
    padding: 0px !important;
    margin: auto;
}

.apPopup-3 .content form .input .inputs-2 {
    padding-left: 10px !important;
}

.apPopup-3 .content form .input .input-large {
    display: block;
    margin-top: 10px;
    width: 90%;
}

.apPopup-3 .content form .input .input-large input {
    width: 100%;
}

.apPopup-3 .content form .input input,
.apPopup-3 .content form .input select {
    border: 1px solid #c4e3f6;
    padding: 6px;
    width: 140px;
    text-align: center;
    height: 40px;
    color: #919191;
}

.expert-home .container .cont .schedule .table .tr .td .buttonmob {
    display: none !important;
}

.apPopup-3 .content form .labels .label > input,
.apPopup-3 .content form .labels .label > select {
    display: none !important;
    border: 1px solid #c4e3f6;
    padding: 6px;
    width: 140px;
    text-align: center;
    height: 40px;
    color: #919191;
}

.schedule .table .tr > .td .buttonmob {
    display: none !important;
}

/* commencement */

.commencement .container form .filebuttons > button {
    background-color: #61c4e3 !important;
    border: 1px solid #61c4e3;
}

.commencement .container form .filebuttons > button:hover {
    background-color: transparent !important;
}

.commencement .container form .labels .label-check {
    position: absolute;
    right: 0;
}

.commencement .container form .labels .label-check input[type="checkbox"] {
    margin-left: 20px !important;
    margin-right: 5px !important;
    display: block !important;
    border: 1px solid #00a6ff !important;
}

/* responsive settings */

.fundraising .container form .date-picker-button {
    height: 45px !important;
    padding-top: 9px !important;
    width: 47% !important;
}

.fundraising .container form .date-picker {
    left: 700px !important;
    top: 50px !important;
}

.expert-profile .container .inputs-radio {
    width: 32%;
    justify-content: space-between;
    align-items: center;
}

.expert-profile .container .inputs-radio label {
    font-size: 15px;
    color: #2b5672;
}

.expert-profile .container .inputs-radio input {
    width: 16px;
    height: 16px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .25) !important;
    margin-right: 7px;
    transform: translateY(20%);
}
.expert-profile .container .inputs-radio input:hover {
    background-color: #FFFFFF !important;
}
.expert-profile .container .inputs-radio input:checked {
    background-color: #62c4e3 !important;
    border-color: #62c4e3 !important;
}
.expert-profile .container .inputs-radio input:focus {
    box-shadow: 0 0 0 0.25rem rgba(98, 196, 227, .25);
}
/* .expert-profile .container .butts {
    margin-bottom: 30px !important;
} */

.expert-profile .container .butts button {
    background-color: transparent !important;
    color: #31353d;
    border-radius: 40px;
    border: 1px solid #CCCCCC;
    width: 90px;
    height: 40px;
    transition: 0.2s;
    margin-right: 10px;
    font-size: 15px;
}

.expert-profile .container .butts button:hover {
    background-color: #61c4e3 !important;
    border: 1px solid #61c4e3;
    color: white;
}

.expert-profile .container .date-picker-button {
    margin-bottom: 20px;
}

.expert-profile .container .input-area .date-picker {
    left: 200px !important;
}

.checkbox_expert

/* .expert-profile .container .checks {
    height: 70px !important;
    margin-top: -10px !important;
} */

.expert-profile .container .checks .check {
    height: 30px !important;
}

.expert-profile .container .checks .check label {
    cursor: pointer;
}

.expert-profile .container .checks .check input {
    height: 15px !important;
    width: 15px !important;
    margin-right: 15px;
}

/* card version */
.card-version {
    margin-top: 30px !important;
    background-color: #fff !important;
}

.card-version .container {
    background-color: #fff !important;
}

.card-version .content {
    margin-bottom: 60px !important;
}

.card-version .content .carousel-area {
    height: auto !important;
    overflow: visible !important;
}

.card-version .content .carousel-area .carousell-item {
    transition: 0.4s !important;
    border: 1px solid #fff !important;
    position: relative;
}

.card-version .content .carousel-area .carousell-item:hover {
    border: 1px solid #61c4e3 !important;
}

.card-version .content .carousel-area .carousell-item.carousell-item-1 {
    height: 410px !important;
}

.card-version .content .carousel-area .carousell-item .post.type-2 .image {
    background-image: url("../images/header-post-2.jpg") !important;
}

.card-version .content .carousel-area .carousell-item .post.type-2 button {
    background-color: #61c4e3;
}

.card-version .content .carousel-area .carousell-item .post.type-3 .image {
    background-image: url("../images/header-post-3.jpg") !important;
}

.card-version .content .carousel-area .carousell-item .post.type-3 button {
    background-color: #ab98d7 !important;
    position: absolute;
    top: 0;
}

.card-version .content .carousel-area .carousell-item .post.type-3a button {
    background-color: #ebd185 !important;
}

.card-version .content .carousel-area .carousell-item .post.type-3 p {
    margin-bottom: 50px !important;
}

.card-version .content .carousel-area .carousell-item .post button:hover {
    background-color: transparent !important;
    color: #61c4e3 !important;
    border: 1px solid #61c4e3 !important;
}

.card-version
    .content
    .carousel-area
    .carousell-item
    .post.type-3
    button:hover {
    color: white !important;
    border: 1px solid white !important;
    background-color: #00000022 !important;
}

.card-version .content .carousel-area .carousell-item .post .price {
    border: none !important;
    margin-bottom: 30px !important;
}

.card-version .content .carousel-area .carousell-item .post .author {
    margin-bottom: 15px !important;
}

.card-version .content .carousel-area .carousell-item .post.type-2 .author {
    margin-bottom: 90px !important;
}

.card-version .content .carousel-area .carousell-item .post .icons {
    border-top: 1px solid #cecece !important;
    padding-top: 5px !important;
}

.card-version .content .carousel-area .carousell-item .ht {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    padding-top: 3px;
    background-color: #00000011;
    border-radius: 50%;
    margin: 8px;
}

.card-version .content .carousel-area .carousell-item .post.type-3 .ht {
    right: 0 !important;
    left: 185px !important;
}

.card-version .content .carousel-area .carousell-item .post.type-4 .image {
    width: 115px;
    display: block;
    height: 115px;
    margin: 20px auto;
    border-radius: 50%;
}

.card-version .content .carousel-area .carousell-item .post.type-4 .text {
    padding: 0 30px !important;
}

.card-version .content .carousel-area .carousell-item4 {
    background-color: #f6fffa;
}

.card-version .content .carousel-area .carousell-item .post.type-4 .text p {
    color: #b6c1cd;
    font-size: 13px;
}

.card-version
    .content
    .carousel-area
    .carousell-item
    .post.type-4
    .text
    .author {
    color: #61c4e3;
    font-size: 13px;
    margin-bottom: -0px !important;
}

.card-version .content .carousel-area .carousell-item .post.type-4 .text .tit {
    font-size: 13px !important;
    color: #7f808a !important;
}

.card-version
    .content
    .carousel-area
    .carousell-item
    .post.type-4
    .text
    .stars {
    margin-right: 10px !important;
}

.card-version
    .content
    .carousel-area
    .carousell-item
    .post.type-4
    .text
    .stars
    .rv {
    color: #494346 !important;
    font-size: 13px !important;
    transform: translateX(60%) !important;
}

.card-version
    .content
    .carousel-area
    .carousell-item
    .post.type-4
    .text
    .stars
    .bx {
    color: yellow;
}

.card-version .content .carousel-area .carousell-item .post.type-4a .text p {
    margin-top: 10px;
}

.card-version .content .carousel-area .carousell-item .post.type-4a .image {
    background-image: url("../images/expert-people-1.webp");
}

.card-version .content .carousel-area .carousell-item .post.type-4b .image {
    background-image: url("../images/expert-people-2.webp");
}

.card-version .content .carousel-area .carousell-item .ht .bxs-heart {
    font-size: 30px;
    color: white;
    display: none;
}

.card-version .content .carousel-area .carousell-item .ht .bx-heart {
    font-size: 30px;
    color: white;
}

.card-version .content .carousel-area .carousell-item .ht:hover .bx-heart {
    display: none;
}

.card-version .content .carousel-area .carousell-item .ht:hover .bxs-heart {
    display: block;
}

.card-version .content .carousel-area .larg .carousell-itemt4 {
    height: 340px !important;
}

.card-version .content .column .container .carousel-area-2 {
    overflow: visible !important;
}

.card-version .content .column .carousell-item-2 .post .image {
    margin-bottom: 20px !important;
}

.card-version .content .column .carousell-item-2 .post-1 .image {
    background-image: url("../images/expert-post-1.webp");
}

.card-version .content .column .carousell-item-2 .post-2 .image {
    background-image: url("../images/expert-post-2.webp");
}

.card-version .content .column .carousell-item-2 .post .text p {
    font-size: 14px;
    color: #324158;
    display: block;
    margin-top: 12px;
    margin-bottom: 30px !important;
}

.card-version .content .column .carousell-item-2 .post .text p {
    transition: 0.2s;
}

.card-version .content .column .carousell-item-2 .post .text .tit {
    transition: 0.2s;
}

.card-version .content .column .carousell-item-2 .post .text .tit:hover {
    color: #a06054 !important;
}

.card-version .content .column .carousell-item-2 .post .text p:hover {
    color: #a06054 !important;
}

.card-version .content .column .carousell-item-2 .post > a {
    transition: 0.2s;
}

.card-version .content .column .carousell-item-2 .post > a:hover {
    color: #a06054 !important;
}

.card-version .content .column .carousell-item-2 .post-3 .image {
    background-image: url("../images/expert-post-3.webp");
}

.card-version .content .column .carousell-item-2 .post-4 .image {
    background-image: url("../images/expert-post-4.webp");
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-2
    .image {
    background-image: url("../images/header-post-2.jpg") !important;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-3
    .image {
    background-image: url("../images/header-post-3.jpg") !important;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-2
    button {
    background-color: #61c4e3 !important;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-3
    button {
    background-color: #aa9ad1 !important;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post
    button:hover {
    background-color: transparent !important;
}

.card-version .content .courses .container .posts-mobile div .post.type-4 .ht {
    position: absolute;
    bottom: 70px;
    left: 70px;
    margin: 12px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    background-color: #00000022;
    border-radius: 50%;
    padding-top: 3px;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .image {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50%;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4a
    .image {
    background-image: url("../images/expert-people-1.webp");
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4b
    .image {
    background-image: url("../images/expert-people-2.webp");
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .text {
    transform: translateX(0%) !important;
    width: 75% !important;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .ht
    .bx,
.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .ht
    .bxs {
    color: white;
    font-size: 20px;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .ht
    .bxs-heart {
    display: none;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .ht:hover
    .bxs-heart {
    display: block !important;
}

.card-version
    .content
    .courses
    .container
    .posts-mobile
    div
    .post.type-4
    .ht:hover
    .bx-heart {
    display: none !important;
}

/* fundraising */

.fundraising-aside {
    overflow-y: auto !important;
}

.fundraising-aside::-webkit-scrollbar {
    opacity: 0 !important;
    display: none !important;
}

.fundraising-aside .content .block .select {
    padding-bottom: 2px;
    border-bottom: 1px dotted #cecece;
    margin-bottom: 0px !important;
}

.fundraising-aside .content .block .text {
    margin-top: 25px !important;
}

.fundraising-aside .content .block .text .titles {
    width: 100% !important;
}

.fundraising-aside .content .block .text .titles > span {
    line-height: 1.5 !important;
    font-size: 13px !important;
    color: #737373 !important;
    display: block;
    width: 100% !important;
}

.fundraising-aside .content .block .text div input {
    width: 100%;
    height: 40px;
    border: 1px solid #cecece;
    padding: 12px;
}

.fundraising-aside .content .block .text div button {
    height: 40px !important;
}

.fundraising-aside .content .block .text div .price > span {
    color: #ff4040;
    font-size: 18px;
}

.fundraising-aside .content .block .text div .price > span span {
    text-decoration: line-through;
    font-size: 15px;
    color: #7c7c7c;
}

.fundraising-aside .content .block .text div button .bx {
    font-size: 20px;
}

.fundraising-aside .content .block .select h3 {
    font-size: 15px;
    color: #737373;
}

.fundraising-page > header {
    padding-top: 20px;
    padding-bottom: 60px;
    background-color: #fafafa !important;
}

.fundraising-page > header .container .video {
    /* height: 360px; */
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    overflow: hidden;
    position: relative;
}

.fundraising-page > header .container .video iframe {
    width: calc(100% + 2px);
    height: 100%;
    background-color: #31353d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* box-shadow: 0px 0px 3px gray; */
}

.fundraising-page > header .col-md-4 {
    background-color: #fafafa !important;
}

.fundraising-page > header .col-md-4 .content {
    background-color: white !important;
    box-shadow: 3px 3px 6px 0px #59C3E11A;
    border-radius: 6px;
    /* padding: 5px 0; */
    padding: 20px;
}

.fundraising-page > header .col-md-4 .content button {
    background-color: orange;
    font-size: 14px;
    color: white;
    border: 1px solid orange;
    width: 80px;
    transition: 0.2s;
    height: 30px;
    padding: 0px;
}

.fundraising-page > header .col-md-4 .content button:hover {
    background-color: transparent;
    border: 1px solid #61c4e3;
    color: #61c4e3;
}

/* .fundraising-page > header .col-md-4 .content .text {
    padding: 15px;
} */

.fundraising-page > header .col-md-4 .content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #31353d;
    margin-bottom: 15px;
}

.fundraising-page > header .col-md-4 .content .percent {
    /* border: 2px solid #61c4e3; */
    border-radius: 50%;
    /* display: flex; */
    /* align-items: center;
    justify-content: center; */
    /* width: 100px;
    height: 100px;
    margin: 10px auto;
    border-radius: 50%; */

    margin: auto;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: conic-gradient(#5cc3e2 0, #5cc3e2 0%, #cccccc 0%, #cccccc);
    mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);
    -webkit-mask: radial-gradient(transparent, transparent 60%, #000 60%, #000 0);
}

.fundraising-page > header .col-md-4 .content .percent span {
    color: #ababab;
    font-size: 16px;
}

.fundraising-page > header .col-md-4 .content .text > p {
    text-align: center;
    color: black;
    font-size: 14px;
}

.fundraising-page > header .col-md-4 .content .text .numbers {
    justify-content: space-between;
}

.fundraising-page > header .col-md-4 .content .text .numbers .number {
    width: 48%;
    padding: 5px;
    text-align: center;
}

.fundraising-page
    > header
    .col-md-4
    .content
    .text
    .numbers
    .number
    span:nth-of-type(1) {
    color: #919191;
    font-size: 14px;
}

.fundraising-page
    > header
    .col-md-4
    .content
    .text
    .numbers
    .number
    span:nth-of-type(2) {
    font-size: 18px;
    color: #7c7c7c;
}

.fundraising-page
    > header
    .col-md-4
    .content
    .text
    .numbers
    .number:nth-of-type(2)
    span:nth-of-type(2) {
    color: black;
}

.fundraising-page > header .col-md-4 .content .text .numbers .number .del {
    text-decoration: line-through;
}

.fundraising-page
    > header
    .col-md-4
    .content
    .text
    .numbers
    .number:nth-of-type(1) {
    background-color: #fafafa;
}

.fundraising-page
    > header
    .col-md-4
    .content
    .text
    .numbers
    .number:nth-of-type(2) {
    background-color: #fcf4ec;
}

.fundraising-page > header .col-md-4 .content .line {
    width: 100%;
    border-top: 1px solid #cecece;
    margin: 0 0 5px 0;
}

.fundraising-page > header .col-md-4 .content .watch {
    text-align: center;
}

.fundraising-page > header .col-md-4 .content .watch span {
    font-size: 14px;
    color: black;
}

.fundraising-page > header .col-md-4 .content .watch .bx {
    color: orange;
    font-size: 25px;
    transform: translateY(20%);
    display: inline-block;
    margin-right: 5px;
}

.fundraising-page > .body-area .container .row {
    margin-bottom: 40px;
}

.fundraising-page > .body-area .container .row .col-md-8 {
    padding: 15px;
}

.fundraising-page > .body-area .container .row .col-md-8 h2 {
    color: #313131;
    /* font-size: 23px; */
}

.fundraising-page > .body-area .container .row .col-md-8 .icos .ico {
    font-size: 15px;
    width: 40%;
    color: #31353d;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 8px 0;
}

.fundraising-page > .body-area .container .row .col-md-8 .icos .ico .bx {
    color: #61c4e3;
    font-size: 25px;
    margin-right: 10px;
}

.fundraising-page > .body-area .container .row .col-md-8 .icos .ico .fa-eye {
    color: #61c4e3;
    font-size: 20px;
    margin-right: 10px;
    margin-left: 3px;
}

.fundraising-page > .body-area .container .row .col-md-8 .icos .ico .fa-tv {
    color: #61c4e3;
    font-size: 15px;
    margin-right: 10px;
    margin-left: 3px;
}

.fundraising-page > .body-area .container .row .col-md-8 .body {
    padding-top: 40px !important;
}

.fundraising-page > .body-area .container .row .col-md-8 .body > p {
    font-size: 14px;
    color: #31353d;
    margin: 15px 0 !important;
}

.fundraising-page > .body-area .container .row .col-md-8 .body > .image img {
    width: 100%;
}

.fundraising-page > .body-area .container .row .col-md-8 .body > .list header {
    background-color: #f2f2f2;
    height: 60px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    > .list
    header
    p {
    font-size: 15px;
    color: #31353d;
    margin: 0;
    padding: 0;
}

.fundraising-page > .body-area .container .row .col-md-8 .body > .list .li {
    height: 60px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1px;
    /* background-color: #fafafa; */
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    > .list
    .li
    span {
    font-size: 15px;
    color: #31353d;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    > .list
    .li
    span
    .fa-play-circle {
    color: #8bc2d0;
    font-size: 17px;
    margin-left: 10px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    > .list
    .li
    span
    span {
    color: #61c4e3;
}

.fundraising-page > .body-area .container .row .col-md-8 h2:nth-of-type(2) {
    margin-top: 40px;
    margin-bottom: 30px;
}

/* .fundraising-page > .body-area .container .row .col-md-8 .body .people-area {
    margin-top: 40px;
} */

.fundraising-page > .body-area .container .row .col-md-8 .body .people-area h2 {
    margin-bottom: 20px;
}

.fundraising-page > .body-area
    .container
    .row
    .col-md-8
    .body
    .people-area > div img {
    border-radius: 50%;
    display: inline-block;
    width: 95px;
    height: 95px;
    margin-right: 20px;
    object-fit: cover;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people-area
    > div
    span {
    font-size: 15px;
    color: #31353d;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people-area
    > div
    button {
    background-color: transparent;
    color: #3d9be9;
    height: 40px;
    font-size: 14px;
    border-radius: 5px;
    width: 150px;
    transition: 0.2s;
    border: 1px solid #3d9be9;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people-area
    > div
    button:hover {
    color: black;
    border: 1px solid black;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people-area
    > div
    button {
    color: #3d9be9;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people-area
    > p {
    color: #31353d;
    font-size: 15px;
    display: block;
    margin-top: 20px;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .comment {
    margin-top: 40px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .comment
    .perfil
    header
    .image
    img {
    width: 50px;
    border-radius: 50%;
    display: block;
    margin-right: 10px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .comment
    .perfil
    header
    span {
    color: #616161;
    font-size: 15px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .comment
    textarea {
    border: 1px solid #cccccc;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 90px;
    padding: 12px;
    outline: none;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .comment button {
    background-color: #84c5d9;
    /* background-color: orange; */
    color: white;
    width: 100px;
    height: 30px;
    font-size: 14px;
    border-radius: 4px;
    height: 40px;
    border: none;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .comment
    button:hover {
    background-color: #84c5d9;
    /* background-color: #f1a700; */
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .comment
    textarea:hover {
    border: 1px solid #cecece;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .comment
    textarea::placeholder {
    color: #cecece;
}

.fundraising-page > .body-area .container .row .col-md-8 .selects select {
    background-color: transparent;
    border: none !important;
    display: block;
    margin-left: 40px;
    font-size: 14px;
    color: #737373;
    outline: none !important;
}

.fundraising-page > .body-area .container .row .col-md-8 .selects {
    border-bottom: 1px dotted #cecece;
    padding-bottom: 10px;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people {
    margin-top: 20px;
    margin-bottom: 0px;
}

#askQuestionsModal .people {
    margin-top: 1rem;
    margin-bottom: 0px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people
    header
    img,
#askQuestionsModal .people header img {
        border-radius: 50%;
        width: 45px;
        margin-right: 10px;
        display: inline-block;
        object-fit: cover;
        height: 45px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-8
    .body
    .people
    header
    > span {
    font-size: 15px;
    color: #616161;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people > span,
#askQuestionsModal .people > span {
    font-size: 15px;
    color: #31353d;
    display: block;
    margin-top: 10px;
    margin-left: 47px;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people-2 {
    margin-left: 47px;
}

.fundraising-page > .body-area .container .row .col-md-8 .body-people {
    padding: 20px 20px;
}

.fundraising-page > .body-area .container .row .col-md-4 {
    background-color: #fafafa !important;
}

.fundraising-page > .body-area .container .row .col-md-4 aside {
    padding: 10px;
    background-color: #fafafa !important;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col {
    padding: 10px;
    border: 1px solid #c0c0c0;
    margin: 15px;
    -moz-box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 12px;
    -webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 12px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 12px;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col:hover {
    border: 1px solid #4CC4DF;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col img {
    width: 100%;
    height: 110px;
    -o-object-fit: cover;
    object-fit: cover;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col .text {
    padding: 0 10px;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col .text h3 {
    font-size: 15px;
    color: #31353d;
    display: block;
    margin-top: 15px;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col .text > p {
    color: #31353d;
    font-size: 14px;
}

.fundraising-page > .fixed-menu {
    z-index: 600000;
    right: 0;
    bottom: 0;
    margin: 25px 45px;
}

.fundraising-page > .fixed-menu .item {
    font-size: 15px;
    color: #7fc0c6;
    text-decoration: none;
    align-items: center;
    margin: 10px 0;
    cursor: pointer;
}

.fundraising-page > .fixed-menu .item:hover .circle {
    background-color: #61c4e3;
}

.fundraising-page > .fixed-menu .item:hover .circle.act,
.act {
    background-color: #61c4e3 !important;
}

.fundraising-page > .fixed-menu .item .circle {
    border: 1px solid #7fc0c6;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: white;
    margin-left: 10px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-4
    aside
    .col
    .text
    .price {
    font-size: 20px;
    color: #ff4040;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-4
    aside
    .col
    .text
    .price
    .del {
    color: #8d8d8d;
    font-size: 13px;
    margin-left: 10px;
    text-decoration: line-through;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col button {
    background-color: #61c4e3;
    color: white;
    width: 100%;
    border: 1px solid #61c4e3;
    border-radius: 4px;
    height: 40px;
    transition: 0.2s;
    font-size: 14px;
}

.fundraising-page
    > .body-area
    .container
    .row
    .col-md-4
    aside
    .col
    button:hover {
    background-color: transparent;
    color: black;
    border: 1px solid black;
}

.fundraising-page > .body-area .container .row .col-md-4 aside .col button .bx {
    margin-left: 10px;
    font-size: 20px;
    transform: translateY(10%);
}

.fundraising-page > header .container .row .col-md-8 > .bt {
    display: none !important;
    margin-top: -30px !important;
    background-color: orange !important;
}

.fundraising-page header .container .row .col-md-4 .btnfund {
    display: none !important;
}

.latest-courses .eval,
.resources .eval,
.fundraising-page .eval {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.latest-courses .eval i.bx-star,
.resources .eval i.bx-star,
.fundraising-page .eval i.bx-star,
#rewardModal i.bx-star {
    color: #CCCCCC;
}

.latest-courses .eval i.bxs-star,
.resources .eval i.bxs-star,
.fundraising-page .eval i.bxs-star,
#rewardModal i.bxs-star {
    color: #FFC107;
}

.latest-courses .eval i,
.resources .eval i,
.fundraising-page .eval i {
    font-size: 14px;
    margin-right: 2px;
}

.latest-courses .eval span,
.resources .eval span,
.fundraising-page .eval span {
    color: #FFC107;
    font-size: 14px;
    margin-left: 5px;
}

.fundraising-page .heart {
    font-size: 20px;
    margin-right: auto;
    padding: 8px;
    cursor: pointer;
}

.fundraising-page .page-menu {
    height: 48px !important;
    background-color: transparent;
}

.fundraising-page .page-menu.page-menu-fixed .page-menu-wrapper {
    width: 100%;
    background-color: #f3fdff;
    position: fixed;
    top: 74.14px;
    left: 0;
    z-index: 1029;
}

.fundraising-page .page-menu .container {
    border-radius: 10px;
    overflow: hidden;
}

.fundraising-page .page-menu .container .item {
    background-color: #f3fdff;
    font-size: 16px;
    text-align: center;
    margin: 0;
    padding: 12px 20px !important;
    flex: 1;
    cursor: pointer;
}

.fundraising-page .page-menu .container .item.item-active {
    background-color: #64c3e2;
    border-radius: 6px;
    color: #FFFFFF;
    cursor: default;
}

.fundraising-page .page-menu .container .item:hover {
    background-color: #f3fdff !important;
    color: #616161;
    border-bottom: none;
}

.fundraising-page .page-menu .container .item.item-active:hover {
    background-color: #64c3e2 !important;
    color: #FFFFFF !important;
}

.fundraising-page .page-menu .container .item span {
    font-size: 12px;
    margin-left: 5px;
}

.fundraising-page.general-courses .body-area .container .row .col-md-8 {
    padding: 0 0.75rem !important;
}

.fundraising-page.general-courses .body-area .container .row .col-md-8 .body .icos .ico {
    width: auto !important;
}

.fundraising-page .ico {
    flex-grow: 1;
    flex-direction: column;
    align-items: flex-start !important;
}

.fundraising-page .ico-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fundraising-page .ico-row:nth-child(1) span {
    color: #616161;
}

.fundraising-page .ico-row:nth-child(2) span {
    font-size: 18px !important;
    margin-left: 35px;
}

.fundraising-page .ico-wrap {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.fundraising-page .ico-wrap i {
    margin-right: 0 !important;
}

.fundraising-page .buttons {
    margin-top: 15px !important;
}

.fundraising-page.general-courses > header .container .row .col-md-4 .content .text > p {
    margin: 0;
}

.fundraising-page .price span:nth-child(1) {
    color: #f74848;
    font-size: 20px;
}

.fundraising-page .price span:nth-child(2) {
    color: #727272;
    font-size: 14px;
    text-decoration: line-through;
}

.fundraising-page .price span.text {
    background-color: #ebf7ff;
    border-radius: 3px;
    color: #919191;
    font-size: 14px;
    text-align: center;
    margin-bottom: 5px;
    padding: 10px;
    display: block;
}

.fundraising-page .body-title {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fundraising-page .body-title h2 {
    color: #61c4e3 !important;
    font-size: 23px;
    margin-bottom: 0;
}

.fundraising-page .body-title p {
    color: #727272;
    font-size: 14px !important;
    margin-bottom: 0;
    margin-left: 15px;
}

.fundraising-page .body-title .d-flex.flex-row {
    margin-left: auto;
}

.fundraising-page .body-title .d-flex.flex-row p {
    margin-left: 0;
    cursor: pointer;
}

.fundraising-page .body-title button {
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #64c3e2;
    border-radius: 5px;
    color: #64c3e2;
    font-size: 14px;
    margin-left: 20px;
    padding: 10px 20px;
}

.fundraising-page .body-content {
    background-color: #FFFFFF !important;
    box-shadow: 3px 3px 6px 0px #59C3E11A;
    border-radius: 6px;
    padding: 20px;
}

.fundraising-page .body-content > * {
    background-color: #FFFFFF !important;
}

.fundraising-page .body-content.list .main-li {
    width: 100% !important;
    height: auto !important;
    background-color: #F0F0F0 !important;
    border-radius: 6px;
    padding: 12px 10px !important;
    position: relative;
}

.fundraising-page .body-content.list .main-li::after {
    position: absolute;
    right: 10px;
    font-family: 'Font Awesome 6 Free';
    content: '\f106';
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.fundraising-page .body-content.list .main-li.collapsed::after {
    position: absolute;
    right: 10px;
    font-family: 'Font Awesome 6 Free';
    content: '\f107';
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.fundraising-page .body-content.list .child-li .li {
    padding-left: 25px !important;
}

.fundraising-page .body-content.list .li {
    width: 100% !important;
    height: auto !important;
    padding: 12px 10px !important;
}

.fundraising-page .body-content.list .li span {
    width: auto !important;
}

.fundraising-page .body-content.list .li span span {
    color: #31353d !important;
}

.fundraising-page .body-content.list .li i {
    font-size: 22px;
    margin-right: 10px;
}

.fundraising-page .body-content.list .li i + span {
    margin-right: 5px;
}

.fundraising-page .body-content.list .li .try-now-btn {
    color: #FFFFFF;
    background-color: #28A745;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px #28A745;
    margin-right: 10px;
    padding: 5px 10px;
    animation: shining 2.5s infinite ease;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fundraising-page .body-content.list .li .try-now-btn i {
    margin-right: 0;
    margin-left: 5px;
}

@keyframes shining {
    0% { opacity: 1; }
    50% { opacity: 0.65; }
    100% { opacity: 1; }
}

.fundraising-page .course-info {
    position: relative;
}

/*.fundraising-page .course-info * {
    background-color: #ffffff !important;
}*/

.fundraising-page .course-info img {
    width: 50%;
    margin: 0 auto;
    display: block;
}

.fundraising-page .course-info-omit {
    overflow: hidden;
    height: 800px;
}

.fundraising-page .course-info-omit::after {
    content: '';
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    border-radius: 0 0 6px 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.fundraising-page .course-info .read-more-btn {
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #64c3e2;
    border-radius: 5px;
    color: #64c3e2;
    font-size: 14px;
    padding: 10px 20px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    display: none;
}

.fundraising-page .course-info-omit .read-more-btn {
    display: block;
}

.fundraising-page .course-info .icos {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 20px;
}

.fundraising-page .people-area .people-info {
    flex-grow: 1;
}

.fundraising-page .people-area i.heart {
    font-size: 20px;
    margin-left: 20px;
    padding: 8px;
    cursor: pointer;
}

.fundraising-page .people-area button {
    background-color: #64c3e2 !important;
    border-color: #64c3e2 !important;
    color: #FFFFFF !important;
    margin-left: 20px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 150px;
}

.fundraising-page .people-name {
    font-size: 20px;
}

.fundraising-page .people-intro {
    color: #727272;
    margin-top: 5px;
    margin-bottom: 0 !important;
}

.fundraising-page .people-intro-mobile {
    color: #727272 !important;
    margin-top: 10px;
    margin-bottom: 0 !important;
    display: none !important;
}

.fundraising-page .comment {
    background-color: transparent !important;
    box-shadow: none;
    margin-top: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: row;
}

.fundraising-page .comment .card {
    width: calc(25% - (15px / 4));
    box-shadow: 3px 3px 6px 0px #59C3E11A;
    border-radius: 6px;
}

.fundraising-page .comment .card:not(:last-child) {
    margin-right: 15px;
}

.fundraising-page .no-data,
.modal .no-data {
    background-color: transparent !important;
    color: #acb5bd !important;
    font-size: 18px !important;
    text-align: center;
    padding: 20px;
    display: block;
}

.fundraising-page .comment .card-head,
#rewardModal .card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fundraising-page .comment .card-head img,
#rewardModal .card-head img,
#rewardEditModal .member img,
#askQuestionsEditModal .member img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.fundraising-page .comment .card-head h5,
#rewardModal .card-head h5,
#rewardEditModal .member h5,
#askQuestionsEditModal .member h5 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    margin-left: 10px;
}

.fundraising-page .comment .card-head .stars,
#rewardModal .card-head .stars {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fundraising-page .comment .card-head .stars i,
#rewardModal .card-head .stars i {
    font-size: 14px;
    margin-right: 3px;
}

.fundraising-page .comment .card-head .star,
#rewardModal .card-head .star,
#rewardEditModal .star {
    color: #61c4e3;
}

.fundraising-page .comment .card-head .star-default,
#rewardModal .card-head .star-default,
#rewardEditModal .star-default {
    color: #cccccc;
}

.fundraising-page .comment .card-head .stars-count,
#rewardModal .card-head .stars-count {
    color: #FFC107;
    font-size: 14px;
    margin-left: 5px;
}

.fundraising-page .comment .card-text,
#rewardModal .card-text {
    color: #727272;
    font-size: 14px !important;
    margin-top: 10px;
    /* overflow: hidden; */
	word-wrap: break-word;
	display: -webkit-box;
}

.fundraising-page .ask-questions header img + .flex-column span:nth-child(2),
#askQuestionsModal header img + .flex-column span:nth-child(2) {
    color: #727272;
    font-size: 14px !important;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people > span,
#askQuestionsModal .people > span {
    margin-left: 0 !important;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people-1:not(:first-child) {
    border-top: 1px solid #CCCCCC;
    padding-top: 20px;
}

#askQuestionsModal .people-1:not(:first-child) {
    border-top: 1px solid #F0F0F0;
    padding-top: 1rem;
}

#askQuestionsModal .people-1:first-child {
    margin-top: 0 !important;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people-2,
#askQuestionsModal .people-2 {
    margin-left: 40px !important;
    position: relative;
}

.fundraising-page > .body-area .container .row .col-md-8 .body .people-2::before,
#askQuestionsModal .people-2::before {
    content: '';
    width: 14.57px;
    height: 16.58px;
    background-image: url('../images/subdirectory-arrow-right.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 8px;
    left: -30px;
}

#rewardModal .card:not(:last-child) {
    border-bottom: 1px solid #F0F0F0 !important;
}

#rewardModal .modal-content,
#askQuestionsModal .modal-content {
    height: 100%;
}

#rewardModal .modal-header,
#rewardEditModal .modal-header,
#askQuestionsModal .modal-header,
#askQuestionsEditModal .modal-header {
    border-bottom: none;
    margin-bottom: 10px;
    position: relative;
}

#rewardModal .modal-header::after,
#rewardEditModal .modal-header::after,
#askQuestionsModal .modal-header::after,
#askQuestionsEditModal .modal-header::after {
    content: '';
    width: calc(100% - 30px);
    height: 4px;
    border-top: 1px solid #59C3E1;
    border-bottom: 1px solid #59C3E1;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#rewardModal .modal-body,
#askQuestionsModal .modal-body {
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 0;
}

#askQuestionsModal .circleStyle {
    margin-top: 1.5rem !important;
}

#askQuestionsModal .modal-body {
    overflow-y: auto;
}

#rewardModal .modal-footer,
#rewardEditModal .modal-footer,
#askQuestionsModal .modal-footer,
#askQuestionsEditModal .modal-footer {
    min-height: 48px;
    border-top: none;
    position: relative;
    margin-top: 10px;
}

#rewardModal .modal-footer::before,
#rewardEditModal .modal-footer::before,
#askQuestionsModal .modal-footer::before,
#askQuestionsEditModal .modal-footer::before {
    content: '';
    width: calc(100% - 30px);
    height: 4px;
    border-top: 1px solid #59C3E1;
    border-bottom: 1px solid #59C3E1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#rewardModal .pagination,
#askQuestionsModal .pagination {
    margin-bottom: 0;
}

#rewardEditModal .member,
#askQuestionsEditModal .member {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#rewardEditModal .stars {
    margin-top: 10px;
}

#rewardEditModal .stars > * {
    cursor: pointer;
}

#rewardEditModal textarea,
#askQuestionsEditModal textarea {
    width: 100%;
    height: 120px;
    border-color: #727272;
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px 15px;
    resize: none;
    outline: none;
}

#rewardEditModal .cancel-btn,
#rewardEditModal .submit-btn,
#askQuestionsEditModal .cancel-btn,
#askQuestionsEditModal .submit-btn {
    height: 40px;
    background-color: transparent;
    border: 1px solid #64c3e2;
    border-radius: 5px;
    color: #64c3e2;
    font-size: 14px;
    padding: 10px 20px;
}

#rewardEditModal .submit-btn,
#askQuestionsEditModal .submit-btn {
    background-color: #64c3e2;
    color: #ffffff;
    margin-left: 10px;
}

/* resources */

.resources header {
    height: 380px !important;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: none !important;
}

.resources header img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.resources header .titl {
    background-color: transparent !important;
}

.resources header .titl .container h1 {
    font-size: 49px !important;
    color: #616161 !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
}

.resources header .titl .container h2 {
    font-size: 27px !important;
    color: #7c7c7c !important;
    display: block;
}

.resources header .input {
    transform: translate(3%, -120%) !important;
}

.resources .courses {
    margin-bottom: 30px !important;
    height: auto !important;
    overflow: visible !important;
}

.resources .courses .container {
    overflow: visible !important;
}

.resources .courses .container .carousel-area {
    overflow: visible !important;
}

/* general-courses */

.general-courses .body-area .container .row .col-md-8 {
    width: 100% !important;
}

.general-courses .course-tag,
.fundraising-page .course-tag {
    background-color: #f3fdff;
    border-radius: 7px;
    color: #62c4e3;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 3px 7px;
    display: inline-block;
}

/* .general-courses > header .container .row .col-md-4 .content > button {
    background-color: #61c4e3 !important;
    border: 1px solid #61c4e3 !important;
}

.general-courses > header .container .row .col-md-4 .content > button:hover {
    background-color: transparent !important;
} */

.general-courses > header .container .row .col-md-4 .content .text > p {
    color: #616161 !important;
    font-size: 14px !important;
    text-align: left !important;
    display: block;
    margin: 15px 0 -30px 0;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    button {
    height: 40px;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    .bt-1 {
    background-color: #ebf7ff !important;
    border: 1px solid #ebf7ff !important;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    .bt-1
    span:nth-of-type(1) {
    font-size: 14px !important;
    color: #919191 !important;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    .bt-1
    span:nth-of-type(2) {
    color: black !important;
    font-size: 18px !important;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    .bt-2 {
    background-color: #64c3e2 !important;
    color: white !important;
    margin-top: 10px !important;
    border: 1px solid #64c3e2 !important;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    .bt-2
    .bx {
    font-size: 20px;
    margin-left: 10px;
    transform: translateY(15%);
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .text
    .buttons
    .bt-2:hover {
    color: black !important;
    background-color: white !important;
    border: 1px solid black !important;
}

.general-courses > header .container .row .col-md-4 .content .watch .stars .bx {
    color: yellow !important;
    font-size: 13px !important;
}

.general-courses
    > header
    .container
    .row
    .col-md-4
    .content
    .watch
    .stars
    > span {
    font-size: 13px;
    color: #414141 !important;
}

.general-courses > header .container .row .col-md-4 .content .watch .user span {
    font-size: 12px !important;
    color: #919191 !important;
}

.general-courses > header .container .row .col-md-4 .content .watch .user .bx {
    color: #919191 !important;
    font-size: 17px !important;
    transform: translateY(5%) !important;
}

.general-courses .container .body .comment .perfil .reviews .rev {
    font-size: 50px !important;
    color: #61c4e3 !important;
    margin-right: 30px !important;
}

.general-courses .container .body .comment .perfil .reviews .stars {
    margin-right: 30px !important;
}

.general-courses .container .body .comment .perfil .reviews .stars .bx {
    color: yellow !important;
    font-size: 20px !important;
}

.general-courses .container .body .comment .perfil .reviews > span {
    font-size: 16px !important;
    color: #414141 !important;
}

.general-courses .container .body .comment textarea {
    border: 1px solid #cecece !important;
}

.general-courses .container .body .comment .review span {
    font-size: 15px !important;
    color: #7f808a !important;
}

.general-courses .container .body .comment .review .stars .bx {
    color: yellow !important;
    font-size: 20px !important;
    margin: 0 3px !important;
}

.general-courses .container .body .comment .button button {
    width: 140px !important;
}

.general-courses .container .body-people .people .review {
    margin-left: 45px !important;
}

.general-courses .container .body-people .people .review .bx {
    color: yellow !important;
    margin: 0 5px !important;
}

.general-courses .container .body-people .people .review span {
    display: inline-block !important;
    margin-left: 12px;
}

/* fundraising-courses */

.fundraising-courses > header .container {
    height: 100%;
}

.fundraising-courses > header .container .row {
    height: 90%;
}

.fundraising-courses > header {
    height: 750px;
    margin-bottom: 222 !important;
}

.fundraising-courses > header .container .row .col-md-8 .video {
    height: 100%;
    padding-bottom: 40px !important;
}

.fundraising-courses > header .container .row .col-md-8 .video iframe {
    height: 100% !important;
}

.fundraising-courses > header .container .row .col-md-8 {
    height: 100%;
}

.fundraising-courses > header .content h1 {
    font-size: 25px !important;
    font-weight: 700 !important;
    color: black !important;
    display: block;
    margin: -5px auto 20px auto;
}

.fundraising-courses > header .content h2 {
    color: #00a6ff !important;
    font-size: 20px;
    display: block !important;
    margin: 0 auto 10px auto !important;
}

.fundraising-courses .container .body.body-people .people header > span {
    color: #61c4e3 !important;
}

.fundraising-courses .container .body.body-people .people header > span.orange {
    color: orange !important;
}

.fundraising-courses .container .body .comment .perfil header > span {
    color: #61c4e3 !important;
}

/* copy--fill */

.copy-fill .page-menu {
    margin-top: -26px!important;
}

.copy-fill > .form-container {
    margin-top: 20px!important;
}

.copy-fill > .form-container form .first-area .left h1 span {
    font-size: 14px!important;
    color: #bdbdbd!important;
}

.copy-fill > .form-container form > .btns button {
    background-color: #61c4e3!important;
    color: white!important;
}

.copy-fill > .form-container form > .subscribe-buttons button:nth-of-type(1) {
    background-color: #61c4e3!important;
    color: white!important;
    width: 100%!important;
    margin: 14px auto!important;
}

.copy-fill > .form-container form > .subscribe-buttons button:nth-of-type(1):hover {
    background-color: transparent!important;
    color: #61c4e3!important;
}

.transcript-expert .page-menu, .transcript-expert .page-menu .item {
    background-color: #ececec!important;
}

.transcript-expert .container .space {
    margin-top: -20px!important;
    margin-bottom: -60px!important;
}

.transcript-expert .container .table-3 tr:nth-of-type(1) {
    background-color: #ececec!important;
    border-top: 3px solid #dbdbdb!important;
}

.transcript-expert .container .table-3 tr td:nth-of-type(1), .transcript-expert .container .table-3 tr th:nth-of-type(1) {
    width: 90px!important;
    text-align: center!important;
}

.transcript-expert .container .table-3 tr td:nth-of-type(2), .transcript-expert .container .table-3 tr th:nth-of-type(2) {
    width: 470px!important;
    text-align: left!important;
}

.transcript-expert .container .table-3 tr td:nth-of-type(3), .transcript-expert .container .table-3 tr th:nth-of-type(3) {
    width: 160px!important;
    text-align: center!important;
}

.transcript-expert .container .table-3 tr td:nth-of-type(4), .transcript-expert .container .table-3 tr th:nth-of-type(4) {
    width: 75px!important;
    text-align: center!important;
}

.transcript-expert .container .table-3 tr td .bx {
    color: #cecece!important;
    margin-right: 5px!important;
    font-size: 17px!important;
}

.transcript-expert .apPopup-1 {
   display: none;
   z-index: 2147483647;
   position: fixed;
   top: 50%;
   transform: translate(-50%,-50%);
   left: 50%;
   box-sizing: 0px 0px 4px gray;
   background-color: white;
   width: 600px!important;
   height: 500px;
   border-radius: 5px;
}

.transcript-expert .apPopup-1 .close {
    color: #61c4e3;
    font-size: 20px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 40px;
    right: 0;
    border: 1px solid #61c4e3;
    border-radius: 50%;
    height: 40px;
    transform: translate(-20%,20%);
    padding: 10px;
}

.transcript-expert .apPopup-1 section span {
    font-size: 15px;
    color: #737373;
    display: block;
}

.transcript-expert .apPopup-1 section > input {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    outline: none;
    margin: 10px 0 15px 0;
    border: 1px solid #a9c3f8;
    height: 43px;
}

.transcript-expert .apPopup-1 section > div > span:nth-of-type(1) {
    width: 35%;
    display: block;
}

.transcript-expert .apPopup-1 section > div > span:nth-of-type(2) {
    width: 55%;
    display: block;
}

.transcript-expert .apPopup-1 section > div select {
    width: 35%;
    padding: 5px;
    border-radius: 5px;
    outline: none;
    margin: 10px 0 15px 0;
    border: 1px solid #a9c3f8;
    height: 43px;
}

.transcript-expert .apPopup-1 section > div > input {
    width: 55%;
    padding: 5px;
    border-radius: 5px;
    outline: none;
    margin: 10px 0 15px 0;
    border: 1px solid #a9c3f8;
    height: 43px;
}

.transcript-expert .apPopup-1 section textarea {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    outline: none;
    margin: 10px 0 15px 0;
    height: 200px;
    border: 1px solid #a9c3f8;
}

.transcript-expert .apPopup-1.showApp, .showApp {
    display: block!important;
}

.home-self .page-menu {
   margin-top: -26px!important;
}

.home-self .form-container {
    margin-top: 20px!important;
}

.home-self .form-container form .right h3 {
    transform: translateY(15%)!important;
}

.home-self .form-container form .right select {
    transform: translateY(5%)!important;
}

.home-self .form-container form .first-area {
    margin-bottom: 40px!important;
}

.home-self .form-container form .subscribe-buttons button.btt {
    width: 100%!important;
    background-color: #61c4e3!important;
    color: white!important;
}

.home-self .form-container form .subscribe-buttons button.btt:hover {
    background-color: transparent!important;
    color: #61c4e3!important;
}

.reserve-page .radio:not(:last-child) {
    margin-right: 25px !important;
}
.reserve-page .form-check-input {
    border-radius: 50% !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
}
.reserve-page .form-check-input + label {
    margin: 0 !important;
}
.reserve-page .container .container {
    width: 100% !important;
    padding: 0 !important;
}

/* ==== 專欄文章 ====*/

@media screen and (min-width : 1441px) and (orientation : landscape){
    .circle__columnist {
        max-width: 1360px;
        margin: 0 auto;
        transition: all .3s;
    }
}

@media screen and (min-width: 768px) and (max-width:991px){

}

.column-page {
    background: rgb(89,195,225);
    background: -moz-linear-gradient(180deg, rgba(89,195,225,1) 0%, rgba(89,195,225,1) 20%, rgba(255,255,255,1) 20%);
    background: -webkit-linear-gradient(180deg, rgba(89,195,225,1) 0%, rgba(89,195,225,1) 20%, rgba(255,255,255,1) 20%);
    background: linear-gradient(180deg, rgba(89,195,225,1) 0%, rgba(89,195,225,1) 20%, rgba(255,255,255,1) 20%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#59c3e1",endColorstr="#ffffff",GradientType=1);
}

/* .column-page#column-page .circle__columnist section {
    width: 71%!important;
} */

.column-page#column-page .circle__columnist .main-article,
.column-page#column-page .circle__columnist .aside .article-1,
.column-page#column-page .circle__columnist .aside .article-0,
.column-page#column-page .circle__columnist .main-article span,
.column-page#column-page .article-0 span{
    border-radius: 20px;
}


.column-page#column-page .circle__columnist .main-article span {
    padding:25px 10px;
    min-height:55px;
    background: rgb(49,53,61);
    background: -moz-linear-gradient(180deg, rgba(49,53,61,0) 0%, rgba(49,53,61,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(49,53,61,0) 0%, rgba(49,53,61,1) 100%);
    background: linear-gradient(180deg, rgba(49,53,61,0) 0%, rgba(49,53,61,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#31353d",endColorstr="#31353d",GradientType=1);
    color: white;
    align-items: center;
    display: flex;
    padding-left: 15px;
    padding-top: 16px;
    font-size: 23px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.column-page#column-page .article-0 span{
    padding:25px 10px;
    min-height:55px;
    background: rgb(49,53,61);
    background: -moz-linear-gradient(180deg, rgba(49,53,61,0) 0%, rgba(49,53,61,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(49,53,61,0) 0%, rgba(49,53,61,1) 100%);
    background: linear-gradient(180deg, rgba(49,53,61,0) 0%, rgba(49,53,61,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#31353d",endColorstr="#31353d",GradientType=1);
    color: white;
    align-items: center;
    display: flex;
    padding-left: 15px;
    padding-top: 16px;
    font-size: 16px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.columnPage__catalogue .input-group{
    width: 90% !important;
}

.columnPage__catalogue .input-group .form-control{
    width: 75% !important;
    display: inline-block;
}

.columnPage__catalogue input.searchArticle{
    position: relative;
    border-radius: 4px;
    padding: 3px 5px;
    border-left: none;
}

.columnPage__catalogue .input-group-text{
    background: transparent;
}

.columnPage__catalogue li a>img{
    width: 205px;
}

.columnPage__catalogue a img.catalogue_AD{
    max-width: 205px;
}

.column-page#column-page .circle__columnist .main-article {
    height: 480px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../images/column-1.webp');
}

/* .column-page#column-page .circle__columnist aside {
    width: 29%!important;
} */

.column-page#column-page .circle__columnist .aside .article-0 {
    width: 100%;
    height: 235px;
    margin: 0 10px 10px 10px;
}

.column-page#column-page .circle__columnist .aside .article-1 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../images/column-5.webp');
}

.column-page#column-page .circle__columnist .aside .article-2 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../images/column-6.webp');
}

.column-page#column-page .circle__columnist .buttons {
    margin: 10px 0!important;
}

.column-page#column-page .circle__columnist section .article,
.columnP_recommend .article {
    padding: 10px;
    margin-bottom: 1%;
    border-radius: 10px;
    box-shadow: 0 0 8px 1px #f1f1f1;

}

.columnP_recommend .article{
    width: 33.333%;
}

.column-page#column-page .circle__columnist .article .columnImg img{
    width: 420px;
    object-fit: contain;
    border-radius: 20px;
    transition: all .3s;
    border-radius: 20px;
}

.column-page#column-page .circle__columnist .article .columnImg img:hover{
    transform: scale(1.05);
    transition: all .3s;
}

.column-page#column-page .circle__columnist section .article .text {
    padding: 9px 18px;
    width: 100%;

}

.column-page#column-page .circle__columnist section .article .text h3 {
    color: #31353d;
    font-size: 24px;
    display: block;
    margin-top: 5px;
    transition: all .3s;
}

.column-page#column-page .circle__columnist section .article .text h3:hover{
    color: #59c3e1;
    transition: all .3s;
}

.column-page#column-page .circle__columnist section .article .text .icons {
    align-items: center;
    padding-top: 10px;
    position: relative;
    margin: 15px 0;

}

.column-page#column-page .circle__columnist section .article .text span {
    color: #7f808a;
    font-size: 16px;
    font-weight: 600;
    margin-right: 1.5em;
    padding-right: 1em;
}

.column-page#column-page .circle__columnist section .article .text span:first-child{
    border-right: solid 1px #F0F0F0;
}

.column-page#column-page .circle__columnist section .article .text .icons b{
    position: absolute;
    right: 5%;
    top: 7%;
}

.column-page#column-page .circle__columnist section .article .text .icons b i,
.columnP_recommend .article .hearts {
    color: #7f7f7f;
    margin-right: 5px;
    font-size: 27px;
    padding-right: 3px;
}

.column-page#column-page .circle__columnist section .article .text .icons > .bx {
    color: #fc4645!important;
    font-size: 20px!important;
}

.column-page#column-page .circle__columnist section .article .text p {
    color: #31353d;
    font-size: 16px;
}

.column-page#column-page .circle__columnist section .article-3 .image {
    background-image: url('../images/column-2.webp');
}

.column-page#column-page .circle__columnist section .article-4 .image {
    background-image: url('../images/column-3.webp');
}

.column-page#column-page .circle__columnist section .article-5 .image {
    background-image: url('../images/column-4.webp');
}

.column-page#column-page .circle__columnist .aside h2 {
    font-size: 17px;
    color: #31353d;
}

.column-page#column-page .circle__columnist .aside .article-01 {
    display: flex;
    padding: 5px;
}

.column-page#column-page .circle__columnist .aside .article-01 .image {
    height: 115px;
    width: 38%!important;
    background-image: url('../images/column-5.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.column-page#column-page .circle__columnist .aside .article-01 .text h4 {
    font-size: 15px;
    color: #31353d;
    display: block;
    margin-bottom: 20px;
}

.column-page#column-page .circle__columnist .aside .article-01 .text span {
    font-size: 15px!important;
    color: #616161!important;
}

.container #content_show ~ p>span span{
    display: inherit !important;
}
.container #content_show ~ p>span img,
.container #content_show img{
 border-radius: 20px;
 width: 100%;
}

.container #content_show img,
.article__inner .editorStyle span,
.article__inner .editorStyle span img{
    width: 100% !important;
    height: auto !important;
    max-width: auto !important;
    border-radius: 20px;
    color: #31353d;
}

.article__inner .topA__Tit{
    color:#58C3E0;
}
.article__inner .topArticle{
    padding: 15px 10px;
    border:#58C3E0 solid 1px;
    background: #fafafa;
    border-radius: 6px;
}

.article__inner .topArticle ul{
    /* list-style-type: decimal; */
}

.article__inner .topArticle ul li:first-child{
    margin-top: 7px;
}

.article__inner .topArticle ul li{
    margin-bottom: 7px;
    border-bottom: solid 1px #58C3E0;
}

.article__inner .topArticle article{
    margin-bottom: 7px;
}

.article__inner .topArticle ul li:last-child{
    border-bottom: none;
}

.article__inner .topArticle article h4{
    font-size: 16px;
    color: #313537;
    line-height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 20px 0 10px;

}

.hotSelected{
    background: #59c3e1;
    border-radius: 4px;
    padding:3px;
    min-width: 42px;
    line-height: 42px;
    font-size: 1.75em;
    color: #fff;
    display: inline-block;
    text-align: center;
}

/* 內頁底下文章推薦 */
.columnP_recommend{
    flex-wrap: wrap;
}

.columnP_recommend .article .recomImg{
    width: 100%;
    min-width: 205px ;
    max-height: 210px;
    overflow: hidden;
    border-radius: 20px;
}

.columnP_recommend .article .recomImg img{
    width: 100%;
    min-height: 210px;
    object-fit: cover;
    object-position: center top;
}

/* .columnP_recommend .article .image{
    width: 100%;
    min-width: 200px;
    min-height: 200px;
    background-size: cover;
    background-position: center top;
    border-radius: 20px;
} */

.columnP_recommend .article .hearts{
    left: 4%;
    top: 5%;
}

.columnP_recommend .article .text{
    margin-top: 10px;
}

.columnP_recommend .article .text .tit{
    font-size: 20px !important;
    font-weight: bold;
    min-height: 55px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 社群分享浮動 */
.socialFixed {
    position: relative
}

.socialFixed ol,
.socialFixed ul {
    line-height: 1.5;
    padding-left: 36px;
    margin: .5rem 0;
}

.socialFixed ul li {
    margin: .5rem 0
}

.socialFixed .social-post__tools {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.socialFixed .social-post__tools li {
    margin: 0 0 .75rem;
    position: relative;
}

.socialFixed .social-post__tools li i {
    font-size: 2.75rem;
}


@media screen and (min-width:960px) {
    .social-post {
        max-width: 720px
    }

    .socialFixed {
        margin-left: 5rem
    }

    .social-post__sidenav {
        position: absolute;
        left: -10.5rem;
        top: 0rem;
        z-index: 1;
        transition: all .3s;
    }
}

@media screen and (max-width:767px) {
    .socialFixed {
        display: none;
    }
    .fundraising-page .people-area button {
        flex-shrink: 1;
    }
    .fundraising-page .people-area i.bx-heart {
        margin: 0 10px;
    }
    .fundraising-page .people-info {
        flex-grow: 1;
        flex-shrink: 0;
    }
    .fundraising-page .people-intro {
        display: none;
    }
    .fundraising-page .people-intro-mobile {
        display: block !important;
    }
}

.social-post__tools .favNum{
    padding: 2px 8px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 3px #bbb;
    position: relative;
    z-index: 3;
}

.btn_shine {
    border: none;
    position: relative;
}

.btn_shine:before {
    content: '';
    position: absolute;
    width: 44px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -44px;
}

@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}

.btn_shine:before {
    content: '';
    position: absolute;
    width: 44px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -44px;
    animation: shine 3s infinite linear; /* Animation */
}

/* ==== 預約專家booking ====*/
.transcript.booking header::before{
    background-color:transparent;
}

.transcript.booking header{
    height: 636px;
    overflow:hidden;
}

.booking .proChoose .protypes{
    position: relative;
}

.booking .proChoose .protypes.collapsed::after{
    position: absolute;
    right: 0;
    font-family: 'Font Awesome 6 Free';
    content: '\f107';
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.booking .proChoose .protypes::after{
    position: absolute;
    right: 0;
    font-family: 'Font Awesome 6 Free';
    content: '\f106';
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.proChoose input.RRB.form-control{
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
}

.proChoose .keyInPrice,
.proChoose .keyInPrice>div{
    padding: 0 3px;
    margin:0;
}

.proChoose .col-form-label{
    padding-top: 0;
    padding-bottom: 0;
}

.booking .agency{
    background: #f3fdff;
    padding: 20px 0;
}

.booking .agency .container {
    padding: 0 0.75rem;
}

.booking .agency h2{
    position: relative;
}

.booking .agency h2::after{
    position: absolute;
    width: 40px;
    height: 4px;
    background: #59c3e1;
    left: 50%;
    margin-left: -20px;
    bottom: -20px;
    content: '';
}

.booking .agency-content {
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.booking .m-agency-content {
    overflow-x: auto;
    padding-top: 40px;
    display: none;
    flex-direction: row;
}

.booking .agency .m-agency-content .a_agency {
    width: 270px;
    flex-shrink: 0;
}

.booking .agency .a_agency {
    width: calc(25% - 20px);
    margin: 10px;
    border-radius: 20px;
    background: #fff;
    padding: 20px;
    transition: all .3s;
    box-shadow: 3px 3px 6px rgba(89, 195, 225, 0.1);
}

.booking .agency .a_agency .agency-cover {
    width: 75.76%;
    height: 0;
    padding-bottom: 75.76%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    margin: 0 auto;
}

.booking .agency .m-agency-content .a_agency .agency-cover {
    width: 115px;
    height: 115px;
    padding-bottom: 0;
}

.booking .agency .a_agency .info h4 {
    margin-top: 1.5rem;
    font-size: 1.2rem;
}

.circleShadow{
    box-shadow: 3px 3px 6px rgba(89, 195, 225, 0.1);
}

.my-page .l2 ul a{
    background: #F3FDFF;
    color: #727272;
    border-radius: 5px;
    transition:all .4s;
}

.my-page .l2 ul a:hover,
.my-page .l2 ul a.bookmarks{
    background: #59C3E1;
    color: #fff;
    font-weight: 600;
}

.booking .expertProFile{
    padding: 1.75em 1.25em;
    border-radius: 40px;
    background-color: white;
}

.booking .expertProFile img{
    border-radius: 100%;
    height: 240px;
    object-fit: cover;
}

.booking .expertProFile button{
    position: absolute;
    right: 1.5em;
    top: 40px;
    border: none;
    background: transparent;
}

.booking .bookmarkLinks ul li{
    border-radius: 20px;
}

.booking .bookmarkLinks ul a{
    display: block;
    background: #F3FDFF;
    color: #727272;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    transition: all .3s;
    padding: 12px 0;
    border-radius: 10px;
}

.booking .bookmarkLinks ul a:hover{
    background: #59C3E1;
    color: #fff;
    transition: all .3s;
}

.booking .bookmarkLinks ul a.actived{
    background: #59C3E1;
    color: #fff;
}

.booking .giftCard{
    background: url('../images/expert/giftCard.svg') no-repeat center top;
    width: 100%;
    height: 280px;
    background-size: cover;
    background-color: white;
}

.booking .specialist header .specialist-table{
    width: calc(100% - 0px);
}

.booking .expertIntro ul.introTit>li{
    padding: 0px 10px;
}

.booking .expertIntro ul.introTit>li{
    border-right: solid 1px #000;
    min-width: 4em;
}

.booking .expertIntro ul.introTit>li:last-child{
    border:none;
}

.booking .expertIntro ul.introTit>li li{
    padding: 10px 0;
}

.booking .expertArticle .post .image {
    background-size: cover;
}

.booking .expertClass>.row{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.booking .expertClass>.col-md-4 {
    display: inline-block;
    float: none;
}

.openReserveModal .modal-header{
    border-bottom: 7px double #59C3E1;
}

.openReserveModal .modal-footer{
    border-top: 7px double #59C3E1;
}

.openReserveModal .reservT{
    border:solid 1px #59C3E1;
}

.openReserveModal .reseInfo{
    padding: 0 20px;
    position: relative;
}

.openReserveModal .reseInfo::before{
    position: absolute;
    left: 7px;
    top: 9px;
    content: '';
    width: 7px;
    height: 6px;
    background: #313537;
    border-radius: 100%;
}


/* exploration */

.exploration .column .posts-mobile .post button {
    border: none!important;
    background-color: #e8d098;
    color: white;
    font-size: 12px;
    padding: 5px;
}

.exploration .column .posts-mobile .post button.purple {
    background-color: #ae98da;
}

.exploration .column .carousel-area-2 .carousell-item-2 button {
    border: none!important;
    background-color: #e8d098;
    color: white;
    font-size: 12px;
    padding: 5px;
}

.exploration .column .carousel-area-2 .carousell-item-2 button.purple {
    background-color: #ae98da;
}

.exploration .column .carousel-area-2 .carousell-item-2, .exploration .column .posts-mobile .post {
    position: relative;
}

.exploration .column .carousel-area-2 .carousell-item-2 .hearts, .exploration .column .posts-mobile .post .hearts {
    position: absolute;
    left: 10px!important;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    z-index: 1000;
    color: white;
    padding-top: 5px;
    border-radius: 50%;
    background-color: #33333322;
    font-size: 20px;
}

.exploration .column .carousel-area-2 .carousell-item-2 .hearts:hover .bxs-heart {
    display: block!important;
}

.exploration .column .carousel-area-2 .carousell-item-2 .hearts:hover .bx-heart {
    display: none!important;
}

.exploration .column .posts-mobile .post .hearts:hover .bxs-heart {
    display: block!important;
}

.exploration .column .posts-mobile .post .hearts:hover .bx-heart {
    display:none!important;
}

.exploration .persons .person button {
    border: none!important;
    background-color: #b8da4f;
    color: white;
    font-size: 12px;
    padding: 5px;
}

.exploration .persons .person {
    background-color: #f6fffa!important;
}

.exploration .persons .person .stars .bx {
    color: yellow;
}

.exploration .persons .person .stars span {
    margin-left: 12px;
    display: inline-block;
}

.exploration .persons .person:hover {
    border: 1px solid white!important;
}

.page-item.active .page-link{color:white !important}
.page-item.disabled .page-link{color:#6c757d !important}
.page-link{color:#5cc3e2 !important}
.page-item.active .page-link{background-color:#5cc3e2 !important;border-color:#5cc3e2 !important}
/* min */

#expert-article-list {
    margin: 0 -10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#expert-article-list .article {
    width: calc(50% - 20px);
    margin: 10px !important;
}
#expert-article-list .article .recomImg {
    width: 100%;
    height: 0;
    padding-bottom: 52.344%;
    min-width: auto;
    max-height: none;
    border-radius: 10px;
}
#expert-article-list .article .recomImg img {
    height: auto !important;
    min-height: auto !important;
}
#openReserve .modal-content {
    height: 100vh;
}

@media (min-width: 1000px) {
    /* .discount .container,
    .page .container {
        width: 1000px !important;
        background-color: white;
    } */

    .replica .container .row .col-md-8 {
        padding-left: 175px;
        transform: translateX(-2%);
    }
    .replica .container .row .col-md-4 {
        padding-right: 147px;
        transform: translateX(-5%);
    }
    .company
        .column
        .carousel-area-2
        .larg-2
        .carousell-item-2
        .post
        .text
        .parag {
        margin-bottom: 20px !important;
    }
    .terms .container {
        width: 1080px !important;
    }
    .my-page-2 > header {
        height: 250px !important;
    }
    /* .specialist > header {
        height: 280px !important;
    } */
    .card-version .content:nth-of-type(1) {
        width: 85%;
    }
    .card-version .content:nth-of-type(2) {
        width: 85%;
    }
    .card-version .content .carousel-area .carousell-item3a {
        margin-top: -30px;
    }
    .general-courses .body-area .container .row .col-md-8 {
        padding: 40px !important;
    }
    .general-courses .body-area .container .row .col-md-8 .body .icos .ico {
        width: 30% !important;
    }

}

/* max */

@media (max-width: 1358px) {
    .join-us > header {
        height: 600px !important;
    }
}

@media (max-width: 1415px) {
    .transcript header .titl .container {
        padding: 30px 20px 20px 150px !important;
    }
}

@media (max-width: 1210px) {
    .page-menu a.button {
        position: absolute;
        right: 60px;
    }
}

@media (max-width: 1200px) {
    .expert .container-sec div .date-picker {
        left: 730px !important;
    }

    .fundraising .container form .date-picker {
        left: 665px !important;
    }
    .expert-profile .container .input-area .date-picker {
        left: 190px !important;
    }
    .fundraising-page .comment .card-head img {
        width: 40px;
        height: 40px;
    }
    .fundraising-page .comment .card-head .stars i {
        font-size: 10px;
    }
    .fundraising-page .comment .card-head .stars-count {
        font-size: 12px;
    }
}

@media (max-width: 1190px) {
    .join-us > header {
        height: 550px !important;
    }
}

@media (max-width: 1140px) {
    .resources header {
        height: 460px !important;
        background-size: cover !important;
        background-position: top center !important;
        /* background-image: url("../images/resources-mobile.png") !important; */
    }
    /* .resources header img {
        display: none !important;
    } */
}

@media (max-width: 1100px) {
    .join-us {
        margin-top: 70px !important;
    }
    .join-us > header {
        height: 470px !important;
        padding-top: 60px !important;
    }
    .join-us > header .content h1 {
        font-size: 30px !important;
    }
    .join-us > header .content h2 {
        font-size: 27px !important;
        text-align: center !important;
    }
}

@media (max-width: 1120px) {
    .contact header {
        background-image: url("../images/contact-mobile.jpg");
    }
    .join-us > header {
        background-image: url("../images/join-header-mobile.jpg");
    }
}


@media (max-width: 1000px) {
    .copy-choose header .stages {
        width: 90%;
    }
    .transcript .btns {
        display: none !important;
    }
    .fundraising-page > .body-area .container .row .col-md-8 .icos .ico {
        font-size: 12px !important;
    }
}

@media (max-width: 991px) {
    button.navbar-toggler {
        display: none!important;
    }
    .discount .container .col-lg-4 {
        margin-bottom: 20px;
    }
    .order-record .container .form .it .parag {
        width: 45%!important;
    }
    .company .container .persons {
        flex-wrap: wrap!important;
    }
    .company .container .persons .person {
        width: 32%!important;
    }
    .company .container .persons .person:nth-of-type(1), .company .container .persons .person:nth-of-type(2), .company .container .persons .person:nth-of-type(3) {
        margin-bottom: 20px!important;
    }
    .company .container .latest-courses .container .col-lg-3:nth-of-type(1) {
        margin-bottom: 20px!important;
    }
    .company .container .latest-courses .container .col-lg-3:nth-of-type(2) {
        margin-bottom: 20px!important;
    }
    .company .container .latest-courses .container .col-lg-3:nth-of-type(3) {
        margin-bottom: 20px!important;
    }
    .company .column {
        height: auto!important;
    }
    .company .column .carousel-area-2 {
        overflow: visible!important;
        height: auto!important;
    }
    .company .column .carousel-area-2 .larg-2 {
        flex-wrap: wrap!important;
        height: auto!important;
        overflow: visible!important;
        justify-content: space-between!important;
    }
    .company .column .carousel-area-2 .larg-2 .carousell-item-2 {
        width: 31%!important;
        margin: 0 0 20px 0px!important;
        height: auto!important;
        position: relative!important;
    }
    .copy-choose header .stages .stage-text {
        width: 74%;
    }
    .about header {
        height: 400px!important;
    }
    .about .content-1 .container img {
        width: 150px!important;
    }
    .share .container .form .chat-buttons .black {
            width: 150px!important;
        }
    .share .container .form .chat-buttons .gray {
            width: 150px!important;
    }
    .share .container .form .chat-buttons .blue {
        width: 150px!important;
    }
    .transcript {
        padding-bottom: 140px!important;
    }
    .page-menu a.button {
        display: none!important;
    }
    .my-page .container-1 .titl a.button {
        display: block!important;
    }
    .appointments .container .date-picker {
        left: 49%!important;
        top: 11%!important;
    }
    .settings .container .date-picker {
        left: 85%!important;
    }
    .settings-2 .container aside {
        width: 100%!important;
    }
    .settings-2 .container .form {
        width: 100%!important;
    }
    .settings-2 .container .info .details {
        display: none!important;
    }
    .settings-2 .container .details-mobile {
        display: flex!important;
        width: 100%!important;
        margin-top: 10px;
        justify-content: space-between!important;
    }
    .settings-2 > .container {
        flex-wrap: wrap!important;
        padding-bottom: 120px!important;
    }
    .settings-2 > .container h1 {
        padding-left: 0px!important;
    }
    .settings-2 .container .details-mobile span {
        font-size: 14px!important;
        color: #7f808a!important;
        margin: 10px!important;
    }
    .settings-2 .container .details-mobile .del {
        text-decoration: line-through!important;
    }
    .settings-2 .container .details-mobile .detail-2 span:nth-of-type(2) {
        color: #ff4040!important;
        font-size: 14px!important;
    }
    .settings-2 aside {
        padding: 21px!important;
    }
    .settings-2 aside h2 {
        font-size: 18px!important;
    }
    .settings-2 .container .form section {
        flex-wrap: wrap!important;
        background-color: #fafafa!important;
    }
    .settings-2 .container .form section .image {
        width: 40%!important;
    }
    .settings-2 .container .form section .info {
        width: 56%!important;
    }
    .terms .container {
        background-color: white!important;
    }
    .identity .section {
        margin-top: 130px!important;
    }
    .identity .section .container {
        padding: 0 0!important;
    }
    .identity .section .container .sec {
        margin: auto auto 30px auto!important;
        padding: 25px!important;
        width: 100%!important;
        height: auto!important;
    }
    .identity .section .container .btn-id {
        width: 100%!important;
    }
    .identity .section .container .sec .image {
        margin-bottom: 30px!important;
    }
    .identity .section .container .sec .image img {
        margin: 0px!important;
    }
    .identity .section .container .sec h3 {
        margin: 0px!important;
        font-size: 24px;
        margin-bottom: 15px!important;
    }
    .identity .section .container .sec span {
        font-size: 17px!important;
        letter-spacing: 1.3px;
    }
    .identity .section .container .sec p {
        font-size: 20px!important;
        width: 90%!important;
    }
    .form-page > .container form .btns button {
        width: 49%!important;
        margin-bottom: 10px!important;
    }
    .subscription > .container form .btns button {
        width: 31%!important;
    }
    .subscription > .container form .first-area {
        flex-wrap: wrap!important;
    }
    .expert .container-sec div .date-picker  {
      left: 490px!important;
    }
    .my-page-2 .container .courses-list .course-list {
        height: auto!important;
        display: none!important;
        flex-direction: column!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile {
        display: flex!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .image {
        width: 40%!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .text {
        width: 60%!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .imgarea {
        align-items: center;
        justify-content: space-between!important;
        margin-bottom: 15px!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .eye {
        width: 100%!important;
        margin-bottom: 10px!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .percent {
        width: 100%!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .percent span {
        font-size: 15px!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .eye span {
        font-size: 15px!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .eye .bx {
        color: #45d1b1!important;
        font-size: 20px!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .icons {
       width: 100%!important;
       margin-top: 12px!important;
    }
    .my-page-2 .container .courses-list .course-list.course-list-mobile .icons .icon span {
        font-size: 15px!important;
    }
    .specialist .page-menu .buttonspec {
        display: block!important;
     }
     .specialist .container .buttns {
        justify-content: center!important;
     }
     .specialist .container .buttns button {
        margin: 2px!important;
        width: 115px!important;
     }
     .expert-home .container .content {
        flex-direction: column!important;
     }
     .expert-home .container .content .cont {
        width: 100%!important;
     }
     .expert-home .container .content aside {
        width: 100%!important;
        display: none!important;
     }
     .expert-home .container .content .cont .schedule {
        transform: translateX(0%)!important;
        width: 100%!important;
     }
     .fundraising .container form .date-picker {
        left: 475px!important;
    }
    .expert-profile .container .input-area .date-picker {
        left: 140px!important;
    }
    .expert-profile .container .checks {
        display: flex!important;
        justify-content: space-between!important;
        /* margin-bottom: 60px!important; */
        /* margin-top: 10px!important; */
        align-items: center!important;
    }
    .expert-profile .container .checks .check {
        width: 100%!important;
        /* align-items: center!important; */
        display: flex;
        justify-content: flex-start;
    }
    .expert-profile .container .checks .check input {
        transform: translateY(35%);
        width: 13px!important;
        height: 13px!important;
        margin-right: 10px !important;
    }
    .expert-profile .container .checks .check #c2 {
        transform: translateY(0%);
        width: 13px!important;
        height: 13px!important;
    }
    .fundraising-page .page-menu a.button {
        display: block!important;
    }
    .fundraising-courses > header {
        height: 450px;
        margin-bottom: 222!important;
    }
    .fundraising-courses > header .container .row .col-md-8 .video {
        height: 100%;
        padding-bottom: 40px!important;
    }
    .transcript-expert .container .space {
        margin-top: 0px!important;
        margin-bottom: 0px!important;
    }
    .transcript-expert .container .table-3 tr td .blue {
        color: #61c4e3!important;
    }
    /* .column-page#column-page .circle__columnist .section {
        width: 100%!important;
    } */
    .column-page#column-page .circle__columnist .aside {
        width: 100%!important;
    }
    .column-page#column-page .circle__columnist .aside-1 {
        display: flex;
        justify-content: space-between;
    }
    .column-page#column-page .circle__columnist .aside-1 .article-0 {
        width: 47%!important;
        margin: 10px 0 0 0!important;
    }
    /* .column-page#column-page .circle__columnist .buttons {
        display: block!important;
    } */
    .column-page#column-page .circle__columnist .buttons.buttons-mobile {
        display: block!important;
    }
    .column-page#column-page .circle__columnist .section .main-article span {
        font-size: 18px!important;
    }
    .column-page#column-page .circle__columnist .section > .article {
        padding: 0px!important;
        margin: 10px 0!important;
    }
    .column-page#column-page .circle__columnist .section > .article .image {
        width: 45%!important;
        background-position: center left!important;
    }
    .column-page#column-page .circle__columnist .section > .article .text {
        width: 55%!important;
    }
    .transcript-expert .container .space {
        margin-top: 0px!important;
        margin-bottom: 0px!important;
    }
    .transcript-expert .container .table-3 tr td .blue {
        color: #61c4e3!important;
    }
    .column-page#column-page .circle__columnist .aside {
        width: 100%!important;
    }
    .column-page#column-page .circle__columnist .aside-1 {
        display: flex;
        justify-content: space-between;
    }
    .column-page#column-page .circle__columnist .aside-1 .article-0 {
        width: 47%!important;
        margin: 10px 0 0 0!important;
    }
    .column-page#column-page .circle__columnist .buttons button {
        margin: 3px!important;
        text-wrap: nowrap;
    }
    .column-page#column-page .circle__columnist .buttons.buttons-mobile {
        display: block!important;
    }
    .column-page#column-page .circle__columnist .section .main-article span {
        font-size: 18px!important;
    }
    .column-page#column-page .circle__columnist .section > .article .image {
        width: 45%!important;
        background-position: center left!important;
    }
    .column-page#column-page .circle__columnist .section > .article .text {
        width: 55%!important;
    }

    .column-page section.col-md-9{
        max-width: 72% !important;
    }
    .fundraising-page .comment {
        flex-direction: column;
    }
    .fundraising-page .comment .card {
        width: 100%;
    }
    .fundraising-page .comment .card:not(:last-child) {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .fundraising-page .comment .card-head img {
        width: 48px;
        height: 48px;
    }
    .fundraising-page .comment .card-head .stars i {
        font-size: 12px;
    }
    .fundraising-page .comment .card-head .stars-count {
        font-size: 14px;
    }
    .booking .agency .container {
        max-width: 100%;
    }
    .booking .agency-content {
        display: none;
    }
    .booking .m-agency-content {
        display: flex;
    }
    #expert-article-list .article {
        width: calc(50% - 20px);
    }
}

@media screen and (min-width: 992px) and (max-width: 1319px){
    .column-page aside.columnPage__catalogue.col-lg-2{
        max-width: 20% !important;
    }
    .column-page section.col-lg-10{
        max-width: 79% !important;
    }
}

@media (max-width: 835px) {
    .search-popup {
        height: auto !important;
        width: 90% !important;
        z-index: 2147483647 !important;
        padding: 30px 0 !important;
        top: 20px !important;
        left: 50% !important;
        overflow-y: scroll !important;
        transform: translate(-50%, 0%) !important;
    }
    .search-popup.showsearchpopup,
    .showsearchpopup {
        position: fixed !important;
    }
    .search-popup .area {
        width: 90% !important;
        background-color: #fafafa !important;
        padding: 20px !important;
        width: 100% !important;
        overflow-y: scroll !important;
    }
    .search-popup .area .input-area {
        flex-direction: column !important;
        margin-bottom: 20px !important;
    }
    .search-popup .area .input-area span {
        display: block;
        margin-bottom: 5px !important;
        width: 100% !important;
    }
    .search-popup .area .input-area select {
        width: 100% !important;
    }
    .transcript .container .persons .person {
        margin-bottom: 10px !important;
    }
    .fundraising-page .page-menu a.button {
        transform: translate(30%, -50%) !important;
    }
}

@media (min-width: 770px) {
    .settings .container .span-4 {
        float: right !important;
        margin-top: -50px !important;
    }
    .settings .container .text .text-2 {
        margin-bottom: -30px !important;
    }

}

@media (max-width: 770px) {
    .discount .container {
        padding: 20px !important;
        width: 100% !important;
        background-color: white !important;
        margin-bottom: 130px !important;
    }
    .discount .container > header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }
    .discount .container > header h1 {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    .discount .container .input-date {
        flex-wrap: wrap;
        width: 100%;
    }
    .discount .container .input-date .date-picker-button {
        display: flex !important;
        width: 100% !important;
        height: 50px !important;
        padding: 20px !important;
        margin-bottom: 5px !important;
    }
    .discount .container .input-date .input-search {
        width: 100% !important;
        display: flex !important;
        margin: 10px 0px !important;
        height: 50px !important;
        padding: 20px !important;
    }
    .discount .container .input-date .input-search .bx {
        font-size: 27px !important;
    }
    .discount .container .input-date .date-picker-button .bx {
        font-size: 27px !important;
    }
    .discount .container .input-date .date-picker {
        transform: translateX(-50%) !important;
        left: 50% !important;
    }
    .discount .container .col-lg-8 {
        display: none !important;
    }
    .replica .container {
        padding-bottom: 120px !important;
    }
    .replica .container .row .col-md-4 .details > .divw {
        padding-right: 0px;
        margin-bottom: 15px;
    }
    .replica .container .row .col-md-12 .form .input:nth-of-type(2) {
        padding-left: 0px;
        margin-top: 15px;
    }
    .replica .container .row .col-md-12 .form .input:nth-of-type(1) {
        padding-left: 0px;
    }
    .replica .container .row .col-md-12 .form .input:nth-of-type(3) {
        padding-left: 0px;
    }
    .order-record .container .form .it {
        height: auto !important;
        padding: 10px !important;
    }
    .order-record .container .form .it,
    .order-record .container .form .it .text {
        flex-wrap: wrap !important;
    }
    .order-record .container .form .it .text {
        display: block;
        width: 100%;
    }
    .order-record .container .form .it .parag {
        width: 100% !important;
    }
    .order-record .container .form .it .parags {
        width: 100% !important;
    }
    .order-record .container .form .it .parags p {
        display: block;
        width: 100% !important;
    }
    .order-record .container .form .it .parags p:nth-of-type(2) {
        display: none;
    }
    .order-record .container .form .button {
        width: 100% !important;
        display: none !important;
    }
    .order-record .container .form .button-mobile {
        display: flex !important;
        align-items: center;
    }
    .page .page-menu {
        height: 75px !important;
        padding: 0px !important;
        overflow: hidden;
        margin: 0px !important;
    }
    .page .page-menu .container {
        flex-wrap: wrap;
        justify-content: center !important;
        text-align: center;
        height: auto !important;
    }
    .page .page-menu .item {
        width: 25% !important;
        height: 100% !important;
        padding: 4px !important;
        margin: 3px;
    }
    .order-record .container .buttons {
        justify-content: center !important;
    }
    .order-record .container .form .list {
        margin-top: 0px !important;
        padding-top: 10px !important;
        padding-bottom: 5px !important;
    }
    .order-record .container {
        padding-bottom: 70px !important;
    }
    .order-record .container .form .it .parag p {
        font-size: 25px;
    }
    .company .page-menu {
        margin-top: -25px !important;
        margin-bottom: 15px !important;
    }
    .company .container .persons {
        margin: 0px !important;
        width: 100% !important;
        padding: 0px !important;
    }
    .company .container .persons .person {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between;
        padding: 10px !important;
        box-shadow: 3px 3px 6px rgba(89, 195, 225, 0.1);
    }
    .company .container .persons .person .hearts {
        z-index: 1029 !important;
        top: 10px !important;
    }
    .company .container .persons .person .image {
        width: 35% !important;
        position: relative;
    }
    .company .container .persons .person .image img {
        width: 90px !important;
        height: 90px!important;
        position: relative !important;
    }
    .company .container .persons .person .info {
        width: 74% !important;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0px 0px 0px 11px !important;
        flex-direction: column !important;
    }
    .company .container .courses-mobile {
        display: block !important;
        margin-bottom: 70px !important;
    }
    .company .container .courses-mobile .itemmm {
        margin-bottom: 20px !important;
    }
    .company .container .courses-mobile .itemmm img {
        width: 100% !important;
    }
    .company .container .persons .person .info h4 {
        font-size: 21px !important;
        font-weight: 500 !important;
        margin-bottom: 0px !important;
    }
    .company .container .persons .person .info p {
        margin: 2px 0 0 0 !important;
    }
    .company .container .tit .container {
        padding-left: 0px !important;
    }
    .company .container .form .it {
        padding: 0px !important;
    }
    .company .container .form .div {
        justify-content: flex-start !important;
    }
    .company .container .form .image {
        width: 25% !important;
        margin: 0px !important;
    }
    .company .container .form {
        background-color: #fafafa !important;
        margin: auto;
        padding: 20px !important;
    }
    .company .container .form .text {
        width: 75% !important;
        margin: 0px !important;
        transform: translateX(-5%) !important;
    }
    .company .page-menu .container {
        justify-content: flex-start !important;
    }
    .copy-choose header .stages .stage-text {
        width: 96%;
    }
    .copy-choose header {
        height: 200px !important;
        background-position: center bottom !important;
    }
    .copy-choose header h1 {
        margin: 0px 0 0 0 !important;
        transform: translateY(-85%) !important;
    }
    .copy-choose header .stages {
        border-radius: 10px !important;
        box-shadow: 0px 0px 10px #cacaca;
        transform: translate(-50%, -15%) !important;
    }
    .copy-choose header .stages .container h2 {
        margin: 5px 0px 20px 0px !important;
        font-size: 20px !important;
    }
    .copy-choose header .stages .stage .st {
        height: 25px !important;
        width: 25px !important;
    }
    .copy-choose header .stages .stage::after {
        height: 5px !important;
        width: 115% !important;
        top: 50%;
        transform: translate(-50%, -50%) !important;
        left: 50%;
    }
    .copy-choose header .stages .stage {
        width: 90% !important;
    }
    .copy-choose .search {
        margin-top: 115px !important;
    }
    .copy-choose .search .container h2 {
        margin: 20px 0px 20px 0px !important;
    }
    .copy-choose .search .container p {
        display: block;
        margin: 0 auto !important;
        text-align: center !important;
        width: 95% !important;
        line-height: 2;
    }
    .copy-choose {
        padding-bottom: 250px !important;
    }
    .contact header {
        height: 200px;
    }
    .contact .container .contact-form {
        padding: 0px !important;
    }
    .contact .container .contact-form .row .col-md-6 {
        padding: 0px !important;
    }
    .contact .container .contact-form .content h1 {
        margin: 0 0 20px 0;
        width: 100%;
    }
    .contact .container .contact-form .col-md-6 {
        width: 95% !important;
        margin: auto !important;
    }
    .contact .container .contact-form .content label {
        font-size: 16px;
    }
    .contact .container .contact-form .content input,
    .contact .container .contact-form .content select {
        margin-bottom: 15px !important;
    }
    .contact .container .contact-form {
        padding-bottom: 100px !important;
    }
    .contact .container .contact-form button {
        width: 95% !important;
    }
    .about header {
        background-image: url("../images/about-mobile.jpg");
        height: 500px !important;
        background-position: center center !important;
        background-size: cover !important;
    }
    .about header > .content {
        height: 240px !important;
    }
    .about header > .content h2 {
        font-size: 28px !important;
        margin: 25px 0 !important;
    }
    .about header > .content h2::after {
        border-top: 5px dotted #c5c5c5;
        transform: translate(44%, -50%);
    }
    .about header > .content h2::before {
        border-top: 5px dotted #c5c5c5;
    }
    .about header > .content h1 {
        font-size: 29px !important;
    }
    .about .content-1 .container p:nth-of-type(3) {
        font-size: 16px !important;
    }
    .about .content-1 .container p:nth-of-type(2) {
        font-size: 19px !important;
        margin-top: 50px !important;
    }
    .about .content-d {
        flex-wrap: wrap !important;
        height: auto !important;
    }
    .about .content-d .text {
        width: 100% !important;
        height: 360px !important;
    }
    .about .content-d .text-desktop {
        display: none !important;
    }
    .about .content-d .text-mobile {
        display: flex !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 20px !important;
    }
    .about .content-d .text.text-mobile > span {
        text-align: left !important;
        font-size: 20px !important;
        letter-spacing: 2px;
        display: flex !important;
        line-height: 1.5 !important;
        width: 100% !important;
        color: #31353d !important;
    }
    .about .content-d .image {
        width: 100% !important;
        height: 360px !important;
    }
    .about .content-a4 .container .icons {
        width: 100% !important;
        margin-top: 60px !important;
    }
    .about .content-a4 .container .icons .icon {
        width: 50% !important;
        margin-bottom: 65px !important;
    }
    .about .content-a4 .container h2:nth-of-type(2) {
        margin-top: 60px !important;
        margin-bottom: 80px !important;
    }
    .about .content-a4 .container > p {
        width: 100% !important;
    }
    .about > .content-a4 {
        height: auto !important;
        padding-bottom: 180px !important;
    }
    .share .container .form .chat-area .direc .stroke {
        display: none !important;
    }
    .share .container .form .chat-area .direc .quote {
        display: none !important;
    }
    .share .container .form .chat-area .direc .code {
        display: none !important;
    }
    .share .container .form .chat-area .direc .ordered-list {
        display: none !important;
    }
    .share .container .form .chat-area .direc .unordered-list {
        display: none !important;
    }
    .share .container .form .chat-area .direc .align {
        display: none !important;
    }
    .share .container .form .chat-buttons {
        margin-bottom: 110px !important;
        flex-wrap: wrap !important;
        margin-top: 20px !important;
    }
    .share .container .form .chat-buttons .btns {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .share .container .form .chat-buttons .black {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .share .container .form .chat-buttons .gray {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .share .container .form .chat-buttons .blue {
        width: 100% !important;
        margin: 0px !important;
    }
    .share .container .form .input-area {
        width: 100%;
        flex-wrap: wrap;
    }
    .share .container .form .input-area .input {
        width: 100% !important;
        padding: 0px !important;
    }
    .share .container .form .input-area .input:nth-of-type(1) {
        padding: 0px !important;
    }
    .share .container .form .input-area .input:nth-of-type(2) {
        padding: 0px !important;
    }
    .share .container .form .chat-area .chat iframe {
        height: 400px;
    }
    .my-home .container {
        padding-bottom: 80px !important;
    }
    .my-home {
        margin-top: -26px !important;
    }
    .my-home .container .form span:nth-of-type(2),
    .my-home .container .form .edits a,
    .my-home .container .form .edits input {
        width: 40%;
    }
    .transcript header {
        /* background-image: url("../images/headerM.jpg") !important; */
        background-size: center center !important;
        background-attachment: scroll !important;
        height: 360px !important;
    }
    .transcript header .titl {
        width: 90% !important;
        height: 175px !important;
    }
    .transcript header .titl .container {
        padding: 30px 0px 20px 30px !important;
    }
    .transcript header .titl .container h1 {
        font-size: 30px !important;
    }
    .transcript header .titl .container h2 {
        font-size: 27px !important;
        margin-bottom: 15px !important;
    }
    .transcript header .input {
        margin: 0px 10px 0px 50px !important;
        transform: translate(0%, -20%) !important;
        padding: 15px !important;
        border-radius: 7px !important;
        width: 270px !important;
    }
    .transcript .container .persons .person .hearts {
        left: 85% !important;
    }

    .my-page header {
        height: auto !important;
        /* padding-bottom: 35px !important; */
    }
    .my-page header .container .area {
        flex-wrap: wrap !important;
    }
    .my-page header .container .area .image {
        width: 100% !important;
        margin-top: 20px !important;
    }
    .my-page header .container .area .image .icon {
        left: 56% !important;
        top: 60% !important;
        transform: translateX(-10%) !important;
        width: 40px !important;
        height: 40px !important;
    }
    .my-page header .container .area .image .icon .bx {
        font-size: 24px !important;
    }
    .my-page header .container .area .image img {
        display: block !important;
        width: 115px !important;
        height: 115px !important;
        margin: 20px auto !important;
    }
    .my-page header .container .area .name {
        width: 100% !important;
        text-align: center !important;
        padding: 0px !important;
        margin-bottom: 15px !important;
    }
    .my-page header .container .area .name span {
        text-align: center !important;
        margin: auto !important;
    }
    .my-page header .container .area .numbers {
        width: 100% !important;
    }
    .my-page header .container .area .numbers .item span:nth-of-type(1) {
        /* font-size: 30px !important;
        font-weight: 400 !important; */
    }
    .my-page header .container .area .numbers .item span:nth-of-type(2) {
        letter-spacing: 3.5px !important;
    }

    .my-page header .container .numbers .item span:nth-of-type(1){
        font-size: 26px;
    }
    .my-page header .container .numbers .item span:nth-of-type(2){
        font-size: 10px;
    }

    .my-page > .container {
        background-color: transparent !important;
        padding: 0px !important;
    }
    .my-page > .container-1 .titl {
        margin-bottom: 50px !important;
        margin-top: 40px !important;
    }
    .my-page .container-2 .column.courses-2.courses,
    .my-page .container-2 .column .container,
    .my-page .container-2 .column .container .larg-2 .carousell-item-2,
    .my-page .container-2 .column .container .carousel-area-2 {
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .my-page .container-2 .column .container .larg-2 {
        flex-wrap: wrap !important;
        height: auto !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .my-page {
        padding-bottom: 70px !important;
    }
    .my-page .container-2 .column .container .carousel-area-2 {
        width: 100% !important;
        margin: auto !important;
        flex-wrap: wrap !important;
    }
    .my-page > .container .courses {
        padding: 0px !important;
        width: 100% !important;
        margin: auto !important;
    }
    .my-page > .container .courses .container {
        width: 100% !important;
    }
    /*
    .my-page > .container .courses .container .posts .post .percent {
        display: none!important;
    }
    */
    .my-page > .container .latest-courses .container {
        width: 100% !important;
    }
    .my-page .container .courses .posts-mobile {
        width: 100% !important;
    }
    .my-page .container-2 .column .container .larg-2 .carousell-item-2 {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .appointments .page-menu {
        margin-top: -25px !important;
    }

    .appointments.init-appointments .container table {
        flex-direction: column;
        display: flex;
    }
    .appointments.init-appointments .container table tr th,
    .appointments .container table.init-table tr th {
        opacity: 0;
        overflow: hidden !important;
        height: 5px !important;
        display: none !important;
    }
    .appointments .container table .tr-1,
    .appointments .container table.init-table .tr-1{
        background-color: #c8ece8 !important;
        height: 35px !important;
    }
    .appointments.init-appointments .container table tr,
    .appointments .container table.init-table tr {
        flex-direction: column;
        display: flex;
    }
    .appointments.init-appointments .container table tr td,
    .appointments .container table.init-table tr td {
        width: 100% !important;
    }

    .appointments.init-appointments .container table tr td button,
    .appointments .container table.init-table tr td button {
        width: 100% !important;
        height: 40px !important;
    }
    .appointments .container .titl-2 {
        flex-direction: column !important;
    }
    .appointments .container .titl-2 h1 {
        width: 100% !important;
    }
    .appointments .container .titl-2 .date-picker-button {
        width: 100% !important;
    }
    .appointments .container .titl-2 .inputs {
        flex-direction: column !important;
    }
    .appointments .container .titl-2 .inputs > .search input {
        width: 90% !important;
    }
    .appointments .container .titl-2 .search-mobile {
        width: 100% !important;
        margin: 0px 0px 10px 0px !important;
        display: flex !important;
    }
    .appointments .container .titl-2 .search-desk {
        display: none !important;
    }
    .appointments .container .titl-2 .date-picker {
        top: 7.5% !important;
    }
    .apPopup {
        width: 100% !important;
    }
    .apPopup .content {
        margin: 0px !important;
    }
    .apPopup .content h1,
    .apPopup .content h2 {
        text-align: left !important;
        margin: 0px !important;
        padding: 10px 0 4px 0 !important;
    }
    .apPopup .content h2 {
        padding: 0px !important;
    }
    .apPopup .content .input {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center !important;
    }
    .apPopup .content .input span {
        display: block;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .apPopup .content .input input {
        margin: 0px 5px 0 0 !important;
        width: 90% !important;
    }
    .apPopup .content .input .icon {
        width: 8% !important;
        transform: translateY(0%) !important;
    }
    .apPopup .content .text {
        padding: 0 5px 20px 5px !important;
        flex-direction: column !important;
    }
    .apPopup .content .text .image {
        width: 100% !important;
        display: flex !important;
        padding: 0px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .apPopup .content .text .image img {
        margin: 0px 15px 0 0 !important;
    }
    .apPopup .content .text .image br {
        display: block !important;
    }
    .apPopup .content .text .image > span {
        flex-direction: column !important;
        display: flex !important;
        text-align: left !important;
    }
    .apPopup .content .text ul {
        margin-top: 20px !important;
        width: 100% !important;
    }
    .settings .page-menu {
        margin-top: -28px !important;
    }
    .settings .container-1 .buttons-area {
        flex-direction: column-reverse !important;
        padding: 0px !important;
    }
    .settings .container-1 .buttons-area .calendar-button {
        width: 100% !important;
        margin: 10px 0 !important;
    }
    .settings .container-1 .buttons-area .buttons button {
        width: 90px !important;
        margin: 0 2px !important;
    }
    .settings .container-1 .date-picker {
        left: 50% !important;
        top: 47% !important;
    }
    .settings .container-3 {
        margin-bottom: 135px !important;
    }
    .settings .container .nt {
        position: relative;
    }
    .settings .container .image {
      width:100%;
    }
    .settings .container .nt .num {
        /* position: absolute !important;
        right: 0 !important;
        top: 70px !important; */
    }
    .settings .container .nt .image img {
        margin-right: 14px !important;
        width: 150px !important;
    }
    .settings .container .nt span {
        width: 100% !important;
    }
    .settings .container .text {
        width: 100% !important;
    }
    .settings .container .text span {
        display: block !important;
    }
    .settings .container .text .area {
        justify-content: space-between !important;
    }
    .settings .container .text .area span {
        display: inline-block !important;
        padding: 0px !important;
        margin: 0px !important;
        transform: translate(0%) !important;
    }
    .settings .container .span-2:nth-of-type(2) {
        display: none !important;
    }
    .settings .container .text .text-icon {
        float: right !important;
    }
    .settings .container .text .text-icon .bx {
        transform: translate(-15%, 25%) !important;
        color: #63d189 !important;
        font-size: 20px !important;
    }
    .settings .container .span-3:nth-of-type(2) {
        display: block !important;
    }
    .terms .container {
        padding: 20px !important;
    }
    .terms .container ol ul {
        padding-left: 0px !important;
    }
    .terms {
        padding-bottom: 120px !important;
    }
    .join-us > header .content h1 {
        font-size: 40px !important;
        transform: translateX(-4%) !important;
    }
    .join-us > header .content .bt {
        font-size: 35px !important;
        font-size: 17px !important;
        letter-spacing: 2.5px;
        width: 130px !important;
        transform: translateX(45%) !important;
        border-radius: 5px !important;
    }
    .join-us > .content h2 {
        font-size: 23px !important;
        margin-bottom: 20px !important;
    }
    .join-us > .content h3 {
        font-size: 20px !important;
    }
    .join-us > .content .icons .icon {
        width: 50% !important;
        padding: 20px !important;
        margin-bottom: 40px !important;
    }
    .join-us > .content .circle-icons {
        margin-top: 200px !important;
        display: none;
    }
    .join-us > .content .circle-icons-mobile {
        display: block !important;
    }
    .join-us > .content .circle-icons .c-icons {
        flex-direction: column !important;
    }
    .join-us > .content .circle-icons .c-icons:nth-of-type(1) {
        margin-bottom: 0px;
    }
    .join-us
        > .content
        .circle-icons
        .c-icons:nth-of-type(1)
        .icon:nth-of-type(2) {
        transform: translateY(0%);
    }
    .join-us
        > .content
        .circle-icons
        .c-icons:nth-of-type(2)
        .icon:nth-of-type(2) {
        transform: translateY(0%);
    }
    .join-us > .content .circle-icons .c-icons .icon {
        margin-bottom: 12px !important;
    }
    .join-us > .content .psic {
        padding: 40px !important;
        height: auto !important;
    }
    .join-us > .content .psic .cont h2 {
        margin: 0px !important;
        text-align: center !important;
    }
    .join-us > .content .psic .cont ul {
        margin-top: 40px !important;
    }
    .join-us > .content .psic .cont ul li {
        letter-spacing: 5px !important;
        font-weight: 300 !important;
        line-height: 2;
    }
    .join-us > .content .call {
        background-image: url("../images/join-cta-mobile.jpg") !important;
        height: 700px !important;
    }
    .join-us > .content .call .content {
        width: 80% !important;
        padding-bottom: 100px !important;
    }
    .join-us > .content .call .content button {
        width: 140px !important;
        margin-top: 30px !important;
        padding: 14px !important;
    }
    .join-us > .content .call .content h3 {
        font-size: 26px !important;
        line-height: 2 !important;
    }
    .identity .identpopup {
        width: 100% !important;
        padding: 10px !important;
    }
    .identity .identpopup .cont {
        padding: 10px !important;
        background-color: transparent !important;
    }
    .identity .identpopup .closeIdent {
        transform: translate(-50%, 70%) !important;
    }
    .form-page > .container form {
        background-color: #fafafa !important;
        padding: 0px !important;
    }
    .form-page > .container form .btns {
        padding: 0px !important;
        width: 100% !important;
    }
    .form-page > .container form .btns button {
        font-size: 13px !important;
    }
    .subscription > .container form .first-area .left {
        width: 100% !important;
        padding: 0px !important;
    }
    .subscription > .container form .first-area .right {
        width: 100% !important;
        padding: 0px !important;
    }
    .subscription > .container form .first-area .left .circle-image {
        transform: translateX(65%) !important;
    }
    .subscription > .container form .first-area .right {
        margin-top: 50px !important;
    }
    .subscription > .container form .btns button {
        width: 45% !important;
    }
    .expert {
        padding-bottom: 90px !important;
    }
    .expert .container-sec .secarea {
        flex-direction: column !important;
    }
    .expert .container-sec .secarea .date-picker-button {
        width: 100% !important;
        position: relative !important;
    }
    .expert .container-sec .secarea .date-picker {
        left: 50% !important;
        top: 80px !important;
    }
    .expert .container-1 header {
        height: auto !important;
        overflow: visible !important;
    }
    .expert .container-1 header .image {
        margin-right: 15px !important;
    }
    .expert .container-1 header .image img {
        width: 50px !important;
    }
    .expert .container-1 header .text p {
        width: 100% !important;
    }
    .expert .container-1 header .text span {
        display: block !important;
    }
    .expert .container-1 header .text p::after {
        content: "\a";
        white-space: pre;
    }
    .expert .page-menu {
        margin-top: -27px !important;
    }
    .expert .container-sec .sec-1 {
        flex-direction: column !important;
    }
    .expert .container-sec .sec-1 .text {
        flex-wrap: wrap !important;
        padding: 0px !important;
    }
    .expert .container-sec .sec-1 .text ul {
        margin: 15px 0 !important;
    }
    .expert .container-sec .sec-1 button {
        width: 100% !important;
    }
    .expert .container-sec .sec-1 .text span {
        font-size: 25px !important;
    }
    .expert .container-sec .sec-1 button.whitebtn {
        text-align: right !important;
        padding-right: 0px !important;
    }
    .expert .container-sec .spans span:nth-of-type(1) {
        padding-right: 10px !important;
    }
    .expert .container-sec .spans span:nth-of-type(2) {
        padding-left: 10px !important;
    }
    .my-page-2 header .container .area .name {
        text-align: center !important;
        margin: auto auto 15px auto !important;
        transform: translateX(0%) !important;
    }
    .specialist header .container .area {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    .specialist header .specialist-table .head {
        padding: 0 0 0 65px;
    }
    .specialist header .specialist-table {
        transform: translateX(0%) !important;
        width: 100% !important;
    }
    .specialist header .specialist-table table {
        width: 100% !important;
    }

    .specialist header .specialist-table .head {
        position: relative;
    }
    .specialist header .specialist-table .head .arrows {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: flex !important;
        justify-content: space-between !important;
    }
    .specialist header .specialist-table .head .arrows .arrw {
        width: 40px;
    }
    .specialist header .specialist-table .button-tab {
        display: block !important;
        width: 100% !important;
        background-color: #62c4e3 !important;
        border: none;
        border-radius: 4px;
        padding: 10px;
        margin-top: 20px;
        color: white;
    }
    .specialist-aside {
        width: 100% !important;
    }
    .specialist .page-menu .buttonspec {
        display: none !important;
    }
    .specialist > .container .column {
        display: block !important;
        height: auto !important;
    }
    .specialist > .container .column .container .larg-2 {
        flex-wrap: wrap !important;
        height: auto !important;
    }
    .specialist > .container .column .container .larg-2 .carousell-item-2 {
        width: auto !important;
    }
    .specialist
        > .container
        .column
        .container
        .larg-2
        .carousell-item-2
        .post
        .text
        .icons {
        transform: translateY(-100%) !important;
    }
    .file-fill {
        padding-bottom: 130px !important;
    }
    .file-fill .container .input-area {
        flex-wrap: wrap !important;
    }
    .file-fill .container .labels .labelnone {
        display: none !important;
    }
    .file-fill .container .input-area .labelblock {
        display: block !important;
    }
    .file-fill .container .input-area input {
        width: 100% !important;
    }
    .file-fill .container .input-area select {
        width: 100% !important;
    }
    .expert-home .container .titl-1 {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px !important;
    }
    .expert-home .container .titl-1 .buttns {
        padding: 0px !important;
        /*flex-direction: row-reverse!important;*/
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 0px !important;
        width: 100% !important;
        display: flex !important;
    }
    .expert-home .container .titl-1 .buttns button {
        margin: 0 10px 0 0 !important;
        width: 90px !important;
    }
    .expert-home .container .cont .schedule {
        position: relative;
    }

    .expert-home {
        padding-bottom: 100px !important;
    }
    .apPopup-3 {
        width: 100% !important;
        padding: 0px !important;
        height: auto !important;
        position: absolute !important;
    }
    .apPopup-3 .content {
        padding: 50px 20px 20px 20px !important;
        overflow-y: scroll !important;
    }
    .apPopup-3 .content h1 {
        padding-top: 0px !important;
    }
    .apPopup-3 .content .closeap {
        transform: translateY(20%) !important;
    }
    .apPopup-3 .content form .input {
        margin-top: -15px !important;
    }
    .apPopup-3 .content form .input textarea {
        height: 50px !important;
    }
    .apPopup-3 .content form .inputs {
        background-color: lawngreen !important;
        flex-wrap: wrap !important;
        display: none !important;
    }
    .apPopup-3 .content form .labels {
        flex-wrap: wrap !important;
    }
    .apPopup-3 .content form .labels .label {
        width: 46% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    .apPopup-3 .content form .labels .label label {
        margin-bottom: 8px !important;
        font-size: 13px !important;
    }
    .apPopup-3 .content form .labels .label > input,
    .apPopup-3 .content form .labels .label > select {
        display: block !important;
        width: 100% !important;
        margin: auto !important;
        height: 40px !important;
        font-size: 13px !important;
    }
    .apPopup-3 .content form .input-large {
        background-color: lime !important;
        padding: 0px !important;
        margin-top: -10px !important;
    }
    .apPopup-3 .content form .input-large input {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
    }
    .apPopup-3 .content form .labels label {
        width: 40% !important;
    }
    .apPopup-3 .content form .inputs input {
        width: 40% !important;
    }
    .apPopup-2 .content h2 {
        margin-bottom: 20px !important;
    }
    .schedule .table .tr-2 {
        display: none !important;
    }
    .schedule .table .tr > .td .buttonmob {
        display: block !important;
    }
    .schedule header {
        position: relative;
        width: 100%;
    }
    .expert-home .container .cont .schedule .table .tr .td .buttonmob {
        display: block !important;
        padding: 0px !important;
        width: 100% !important;
    }
    .fundraising .container form .date-picker-button {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    .fundraising .container form .date-picker {
        left: 50% !important;
        top: 150px !important;
    }
    .expert-profile .container .input-area .date-picker {
        left: 50% !important;
        top: 45px !important;
    }
    /* .expert-profile .container .inputs-radio {
        flex-direction: column !important;
    } */
    .expert-profile .container .inputs-radio .radio {
        padding: 0px !important;
        /* margin: 0px !important; */
        /* width: 100% !important; */
    }
    .card-version .content .column {
        display: flex !important;
    }
    .card-version .content .column .container {
        display: flex !important;
    }
    .card-version .content .column .container .carousel-area-2 {
        display: flex !important;
    }
    .card-version .content .column .container .carousel-area-2 .larg-2 {
        display: flex !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-item-2 {
        width: 100% !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-item-2
        .post {
        width: 100% !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-item-2
        .post
        a {
        width: 100% !important;
        text-decoration: none !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-item-2
        .post
        .image {
        width: 100% !important;
        height: 200px !important;
        background-position: center top !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-item-2
        .post
        .text {
        width: 100% !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-itemb {
        display: none !important;
    }
    .card-version
        .content
        .column
        .container
        .carousel-area-2
        .larg-2
        .carousell-item-2
        .post
        .date {
        display: none !important;
    }
    .card-version {
        padding-top: 160px !important;
    }
    .fundraising-page .page-menu a.button {
        display: none !important;
    }
    .fundraising-page > header .container .row .col-md-8 .video {
        height: 250px !important;
        /* box-shadow: 0px 0px 3px gray; */
    }
    .fundraising-page > header .container .row .col-md-8 > .bt {
        display: block !important;
        color: white !important;
        font-size: 14px;
        border: none;
        height: 40px;
        width: 130px;
        margin: 15px auto;
    }
    .fundraising-page > header .container .row .col-md-4 .content button {
        /* display: none !important; */
    }

    .content .button-class {
        display: none !important;
    }

    .fundraising-footer-menu {
        display: none !important;
    }
    .fundraising-page .body-area .container .row .col-md-8 .icos .ico {
        width: 50% !important;
    }
    .fundraising-page header .container .row .col-md-4 .btnfund {
        background-color: #61c4e3 !important;
        color: white !important;
        border: none;
        font-size: 14px;
        display: block !important;
    }
    .fundraising-aside .content .block img {
        width: 50% !important;
        display: block;
        margin: auto;
    }
    .fundraising-page .body-area .container .row .col-md-8 .list header {
        padding: 10px !important;
    }
    .fundraising-page .body-area .container .row .col-md-8 .list .li {
        padding: 10px !important;
    }
    .fundraising-page .body-area .container .row .col-md-8 .comment button {
        width: 100% !important;
    }
    .fundraising-page {
        padding-bottom: 120px !important;
    }
    .fundraising-page
        .body-area
        .container
        .row
        .col-md-8
        .body-people
        .people-2 {
        margin: 20px 0 0 0px !important;
    }
    .fundraising-page .body-area .container .row .col-md-8 .body-people {
        margin-bottom: 0px !important;
        margin-top: 0px !important;
        padding: 0px !important;
    }
    .resources header {
        height: 340px !important;
        background-size: cover !important;
        background-position: top center !important;
        background-image: url("../images/resources-mobile.png") !important;
    }
    .resources .courses {
        margin-top: 80px !important;
        background-color: #fafafa !important;
    }
    .fundraising-courses > header {
        height: 400px;
        margin-bottom: 222 !important;
    }
    .fundraising-courses > header .container .row .col-md-8 .video {
        height: 100%;
        padding-bottom: 0px !important;
    }
    .fundraising-page .page-menu {
        height: 37px !important;
    }
    .fundraising-page .page-menu .container .item {
        font-size: 14px;
        padding: 8px 0 !important;
    }
    .fundraising-page .ico-wrap {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    .fundraising-page > .body-area .container .row .col-md-8 .icos .ico .bx {
        font-size: 20px;
    }
    .fundraising-page .ico-row:nth-child(1) span {
        font-size: 14px !important;
    }
    .fundraising-page .ico-row:nth-child(2) span {
        font-size: 16px !important;
        margin-left: 28px;
    }
    .booking .agency .m-agency-content .a_agency .agency-cover {
        width: 90px;
        height: 90px;
        padding-bottom: 0;
    }
    .fundraising-page .course-info img {
        width: 80% !important;
    }
}

@media (max-width: 760px) {
    .specialist header .specialist-table {
        transform: translateX(0%) !important;
        width: 100% !important;
        height: auto !important;
    }
    .fundraising-courses > header .content {
        padding: 0 20px !important;
    }
}

@media (max-width: 635px) {
    .copy-choose header .stages .stage {
        width: 90% !important;
    }
    .copy-choose header .stages .stage::after {
        width: 105% !important;
    }
    .copy-choose header .stages .stage-text {
        width: 96%;
    }
}

@media (max-width: 580px) {
    .copy-choose header .stages .stage::after {
        width: 115% !important;
    }
    .fundraising-page .course-info .icos {
        flex-wrap: wrap;
    }
    .fundraising-page.general-courses .body-area .container .row .col-md-8 .body .icos .ico {
        width: 50% !important;
    }
}

@media (max-width: 575px) {
    .replica .container .col-md-8 {
        background-color: white;
    }
    .replica .container .col-md-4 .details {
        padding: 25px 20px !important;
    }
    .replica .container .col-md-4 .details h2 {
        color: #313131;
    }
    .replica .container .row .col-md-8 .form .input {
        width: 100% !important;
    }
    .card-version
        .content
        .courses
        .container
        .posts-mobile
        div
        .post.type-4
        .text {
        padding-left: 10px !important;
    }

    .appointments .container table tr th {
        font-size: 13px !important;
        color: #373c47 !important;
    }
}

@media (max-width: 480px) {
    .copy-choose header .stages .stage-text {
        width: 100%;
    }
    .share .container .form .chat-area .direc .align {
        display: none !important;
    }
    .share .container .form .chat-area .direc .space-right {
        display: none !important;
    }
    .share .container .form .chat-area .direc .space-left {
        display: none !important;
    }
    .share .container .form .chat-area .direc .url {
        display: none !important;
    }
    .share .container .form .chat-area .direc .comment {
        display: none !important;
    }
    .share .container .form .chat-area .direc .info {
        display: none !important;
    }
    .share .container .form .chat-area .direc .chat-ico {
        height: 40px !important;
        width: 45px !important;
        font-size: 14px !important;
    }
    .share .container .form .chat-area .direc .chat-ico {
        font-size: 18px !important;
    }
    .share .container .form .chat-area .direc .select .option {
        font-size: 15px !important;
    }
    .share .container .form .chat-area .direc .select.sel {
        width: 80px !important;
    }
    .share .container .form .chat-area .direc .select .list > span {
        font-size: 13px !important;
    }
    .share .container .form .chat-area .direc .color .table-colors {
        left: -35px !important;
    }
    .share .container .form .chat-area .direc .pen .background-table {
        left: -60px !important;
    }
    .my-home .container .form .edits a {
        font-size: 13px !important;
        transform: translateX(-30%) !important;
    }

    .expert-home .container .cont .schedule .key > span {
        font-size: 12px !important;
    }
    .expert-home .container .titl .buttns > button {
        width: 80px !important;
        padding: 5px !important;
        margin-right: 5px !important;
        font-size: 12px !important;
    }
    .fundraising-courses > header {
        padding: 0 20px !important;
    }
    .fundraising-courses > header {
        height: 450px !important;
    }

    .specialist header .specialist-table table tr td:nth-of-type(1){width:65px}
    .specialist header .specialist-table table tr td{width:calc( (100% - 65px) / 7)}
}

@media (max-width: 455px) {
    .expert-profile .container .checks .check {
        margin: 15px 0 !important;
    }
    .fundraising-page .course-info img {
        width: 100% !important;
    }
}

@media (max-width: 442px) {
    .transcript header .titl .container {
        padding: 30px 0px 20px 20px !important;
    }
    .transcript header .titl .container h1 {
        font-size: 28px !important;
    }
    .transcript header .titl .container h2 {
        font-size: 23px !important;
    }
    .transcript header .titl .container h3 {
        font-size: 17px !important;
    }
    .my-page-2 header .container .area .numbers .item span > span {
        font-size: 10px !important;
    }
}

@media (max-width: 400px) {
    .about header > .content {
        width: 90% !important;
    }
    .about header > .content h2::after {
        transform: translate(84%, -50%);
        width: 70px !important;
    }
    .about header > .content h2::before {
        transform: translate(-104%, -50%);
        width: 70px !important;
    }
    .about .content-1 .container p:nth-of-type(2) {
        font-size: 15px !important;
    }
    .about .content-a4 .container .icons .icon > span {
        font-size: 18px !important;
    }
    .expert-home .container .titl .buttns > button {
        width: 65px !important;
        padding: 5px !important;
        margin-right: 5px !important;
        font-size: 12px !important;
    }
    .expert-home .container .cont .schedule .table .tr .td {
        width: 20% !important;
    }
}

@media (max-width: 366px) {
    .transcript header .titl {
        height: 150px !important;
    }
    .transcript header .titl .container h1 {
        font-size: 23px !important;
    }
    .transcript header .titl .container h2 {
        font-size: 19px !important;
    }
    .transcript header .titl .container h3 {
        font-size: 15px !important;
    }
}

@media (max-width: 362px) {
    .copy-choose header .stages .stage-text {
        width: 103% !important;
    }
}

@media (max-width: 360px) {
    .expert-home .container .titl .buttns {
        margin-bottom: 50px !important;
    }
}

@media (max-width: 350px) {
    .my-page > .container .courses .container .posts .post .percent {
        display: none !important;
    }
    .resources header {
        height: 340px !important;
    }
    .resources header .input {
        transform: translate(-10%, -70%) !important;
    }
}

@media (max-width: 327px) {
    .expert-profile .container .checks .check {
        margin: 20px 0 !important;
    }
    .expert-profile .container .checks {
        margin-bottom: 90px !important;
    }
}

@media (max-width: 316px) {
    .about header > .content {
        height: 220px !important;
    }
    .about header > .content h1 {
        font-size: 24px !important;
    }
    .about header > .content h2::after {
        transform: translate(114%, -50%);
        width: 50px !important;
    }
    .about header > .content h2::before {
        transform: translate(-104%, -50%);
        width: 50px !important;
    }
    .transcript header .titl {
        height: 140px !important;
    }
    .transcript header .titl .container h1 {
        font-size: 22px !important;
    }
    .transcript header .titl .container h2 {
        font-size: 17px !important;
    }
    .transcript header .titl .container h3 {
        font-size: 14px !important;
    }
}

.form-error{display:block;color:#B01511}
.swal2-container{z-index:10000000010}
.customized-swal-icon{
    width: 180px;
    height: 180px;
    border: 0;
}
.customized-swal-icon img{width:100%}
#register-captcha-img{max-width:250px}
#refresh-captcha{cursor:pointer;
    font-size: 14px;
    color: #CCCCCC;
}
#refresh-captcha:hover{color:#6a6969}
/* ==== NEW RWD ==== */
.modal-loading{
    z-index:10000000010 !important;
    background-color:rgba(0,0,0,.8);
    width:100%;height:100%;top:0;left:0;
}
.modal-loading img{max-width:200px}

/* ============================================ newRWD ============================================ */

/* @media screen and (min-width: 992px) {
    .columnP_recommend .article .recomImg{
        min-width: 205px;
    }
} */

/* 2k-2560 4k 3840 */

@media screen and (max-width : 1440px) and (orientation : landscape){
    .circle__columnist.circle__columnist_detail {
        max-width: 1170px;
        transition: all .3s;
    }

}

@media screen and (max-width : 1280px) and (orientation : landscape){

}

@media screen and (max-width : 1024px) and (orientation : landscape){

}

@media screen and (max-width: 767px) {
    /* 專欄文章767 */
    .column-page {
        background: rgb(89,195,225);
        background: -moz-linear-gradient(180deg, rgba(89,195,225,1) 0%, rgba(89,195,225,1) 20%, rgba(255,255,255,1) 20%);
        background: -webkit-linear-gradient(180deg, rgba(89,195,225,1) 0%, rgba(89,195,225,1) 20%, rgba(255,255,255,1) 20%);
        background: linear-gradient(180deg, rgba(89,195,225,1) 0%, rgba(89,195,225,1) 20%, rgba(255,255,255,1) 20%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#59c3e1",endColorstr="#ffffff",GradientType=1);
    }

    .column-page#column-page .circle__columnist .d-flex>section{
        width:100%;
    }

    .column-page#column-page .circle__columnist .main-article{
        height: 200px;
    }

    .column-page#column-page .circle__columnist .aside .article-1,
    .column-page#column-page .circle__columnist .aside .article-0{
        height: 125px;
    }

    .column-page#column-page .circle__columnist section .article .text p.article-content {
        -webkit-line-clamp: 3;
        color: #31353d;
        font-size: 13px;
    }

    .column-page#column-page .circle__columnist section .article .text h3{
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .circleStyle .bar .pagination li.page-item a,
    .circleStyle .bar .pagination li.page-item.active a,
    .circleStyle .bar .pagination li.page-item span{
        width: 40px;
        height: 40px;
        line-height: 29px;
        text-align: center;
        font-size: 1em;
    }

    .column-page .columnType .ul_unstyled{
        overflow-x: scroll !important;
        white-space: nowrap;
        width: 100%;
    }

    .column-page .columnType li button {
        min-width: 90px;
        text-align: center;
        margin: 3px!important;
        text-wrap: nowrap;
        border:none;
        padding: 7px;
        color: #59c3e1;
        border-radius: 6px;
    }

    .article_AD{
        margin-top: 15px;
    }

    .column-page#column-page .circle__columnist section .article .text span{
        margin-right: 0.5em;
        padding-right: 0.5em;
    }

    .column-page#column-page .circle__columnist section .article .text .icons b{
        right: -7%;
        top: 0%;
    }

    /* .posts-mobile .post{
        height: auto !important;
        margin: 5px 25px 5px 5px;
        min-width: 320px;
        padding: 10px;
        margin-bottom: 1%;
        border-radius: 10px;
        box-shadow: 0 0 8px 1px #f1f1f1;

    }
    .posts-mobile .d-flex{
        overflow-x: scroll;
        flex-flow: row;
    } */

    .column-page#column-page .circle__columnist .article .columnImg{
        line-height: 200px;
    }

    .column-page#column-page .circle__columnist .article .columnImg img{
        width: 180px;
        border-radius: 15px;
    }

    .post .text p.parag{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: auto;
        padding-bottom: 0;
        margin-bottom: 0;
        line-height: 1.5em;
        font-size: .85em;
    }

    .post-page {
        padding-bottom: 60px!important;
    }

    .columnP_recommend {
        flex-wrap: nowrap !important;
        overflow-x: scroll;
    }

    .columnP_recommend .article{
        width: 100%;
    }

    .columnP_recommend .article .recomImg{
        min-width: 295px;
        max-height: 155px;
    }

    .columnP_recommend .article .recomImg img{
        min-height: 155px !important;
        height: 155px !important;
    }

    .column-page#column-page .circle__columnist section .article,
    .columnP_recommend .article{
        margin-right: 2%;
    }

    .columnP_recommend .article .text .tit{
        font-size: 16px;
    }

    .columnP_recommend .article .parag{
        display: none;
    }

    .article_footerAD{
        margin-bottom: 80px;
    }

    /* 預約專家booking 767 */
    .circleInput .multi-collapse .input-group{
        padding: 7px 0;
    }

    .booking .agency{
        padding: 0;
    }

    .booking .agency .flex-row{
        overflow-x: scroll;
    }

    .booking .agency .a_agency{
        margin: 10px;
        min-width: 245px;
    }

    .booking .agency .button-area > button{
        width: 90% !important;
    }

    .transcript{
        padding-bottom: 0 !important;
    }

    .page{
        padding-bottom: 0 !important;
    }

    .specialist-table table td{
        width: auto;
    }

    /* .column-page section.col-md-9 {
        max-width: 100% !important;
    } */

    #expert-article-list .article {
        width: calc(100% - 20px);
    }
    #expert-article-list .article .recomImg {
        min-width: auto;
        max-height: none;
    }
}

@media screen and (max-width: 441px){
    .circleStyle .bar .pagination li.page-item a,
    .circleStyle .bar .pagination li.page-item.active a,
    .circleStyle .bar .pagination li.page-item span{
        width: 35px;
        height: 35px;
        line-height: 20px;
    }
}

@media screen and (max-width: 767px) and (min-width: 727px) {
    .column-page section.col-md-9 {
        max-width: 63% !important;
    }
}

@media screen and (min-width: 577px) and (max-width: 728px) {
    .column-page section.col-md-9 {
        max-width: 52% !important;
    }
}

@media screen and (max-width: 576px) {
    .column-page#column-page .circle__columnist .section > .article {
        flex-direction: column;
        padding: 10px !important;
    }
    .column-page#column-page .circle__columnist .article .columnImg img {
        border-radius: 10px !important;
    }
    .column-page#column-page .circle__columnist .section > .article .text {
        width: 100% !important;
    }
    .column-page#column-page .circle__columnist section .article .text .icons b {
        right: 0 !important;
    }
    .column-page section.col-md-9 {
        max-width: 100% !important;
    }
}