#calculate {padding: 0 5vw;padding-top: 40px;padding-bottom: 100px;}

#calculate .left .card-calculate {border-radius: 4px;box-shadow: 10px 10px 23px 0 rgba(0, 0, 0, .2);background-color: white;padding: 20px;position: relative;background-repeat: no-repeat;background-size: cover;background-position: center;}

#calculate .card-calculate .form-group label {font-size: 14px;color: white;font-weight: 700;}

#calculate .card-calculate label.custom-control-label::after {cursor: pointer;}

#calculate .card-calculate form {padding: 20px;padding-bottom: 0;}

#calculate .card-calculate .form-group {margin-bottom: 20px;}

#calculate .card-calculate .head {height: 155px;padding: 41px 0;font-size: 23px;font-weight: 600;text-align: center;text-shadow: 3px 2px #000;color: white;}

#calculate .card-calculate .head:after {content: "محاسبه یک تکرار بیشینه (1RM)";}

/* ===== گروه انتخاب فرمول ===== */

#calculate .jensiat {padding-top: 10px;}

#calculate .jensiat:before {content: "فرمول محاسبه :";margin-left: 10px;font-size: 14px;color: #fff;font-weight: 700;}

#calculate .jensiat .custom-radio {line-height: 21px;}

#calculate .jensiat .custom-control-label::before,
#calculate .jensiat .custom-control-label::after {display: none !important;}

#calculate .jensiat .custom-control {display: inline-block;padding: 0;margin: 6px 6px 0 0;}

#calculate .jensiat .custom-control-label {display: inline-block;padding: 8px 20px;border-radius: 30px;background-color: rgba(255,255,255,.15);color: #fff;font-weight: 600;font-size: 14px;cursor: pointer;margin: 0;transition: all .3s ease-in-out;}

#calculate .jensiat .custom-control-input:checked ~ .custom-control-label {background-color: #ff4b3e;color: #fff;}

#calculate .btn-me {padding: 7px 20px;border-radius: 4px;background-color: transparent;position: relative;display: inline-block;color: white;font-size: 17px;font-weight: 600;transition: all .5s ease-in-out;outline: none;border: 1px solid #ccc;}

#calculate .btn-me:hover {background-color: black;}

#calculate .right h2 {color: #ff4b3e;font-size: 25px;font-weight: 600;display: inline-block;}

#calculate .right h2:first-of-type ~ h2 {margin-top: 20px;}

#calculate .right h2:after {content: "";display: block;position: relative;top: 20px;width: 100%;height: 4px;background-color: #ff4b3e;}

#calculate .right p {text-align: justify;padding-top: 30px;}

@media (min-width: 768px) {

    #calculate .card-calculate .head:after {content: "محاسبه یک تکرار بیشینه (1RM) با دو فرمول معتبر جهانی";}

    #calculate .left .card-calculate {padding: 25px;}

    #calculate .card-calculate form {padding: 25px;}

    #calculate .card-calculate .form-group {margin-bottom: 30px;}

    #calculate .jensiat:before {font-size: 16px;}

    #calculate .card-calculate .form-group label {font-size: 16px;}

}

@media (min-width: 992px) {

    #calculate .left {position: sticky;top: -100px;}

    #calculate .right {padding-left: 50px;}

    #calculate .right h2 {font-size: 1.8vw;}

    #calculate .left .card-calculate {padding: 30px;}

    #calculate .card-calculate form {padding: 30px;}

    #calculate .card-calculate .form-group {margin-bottom: 40px;}

    #calculate .jensiat:before {font-size: 17px;}

    #calculate .card-calculate .form-group label {font-size: 17px;}

}

@media (min-width: 1200px) {

    #calculate .card-calculate .head:after {content: "محاسبه دقیق یک تکرار بیشینه (1RM) با فرمول‌های Epley و Brzycki";}

}

/* ===================================================
   دیالوگ نتیجه
   =================================================== */

#onerm {font-family: dana;position: fixed;width: 100%;max-width: 600px;border-radius: 12px;top: 8%;right: 0;left: 0;margin: 0 auto;z-index: 10000000;display: none;opacity: 0;transition-duration: .5s;background-color: #191919;border: 3px solid #ff4b3e;animation-name: show;animation-duration: 1s;max-height: 84vh;overflow: hidden;flex-direction: column;padding: 0 !important;}

#onerm.active {display: flex;}

#onerm.fade {opacity: 1;}

#onerm .save {font-size: 44px;color: #fff;position: absolute;top: 10px;left: 18px;cursor: pointer;transition-duration: 400ms;z-index: 2;}

#onerm .header {flex-shrink: 0;padding: 22px 20px 14px;border-bottom: 1px solid rgba(255,255,255,.08);}

#onerm .header span {font-size: 22px;font-weight: bold;color: #fff;display: block;text-align: center;}

#onerm .body {padding: 24px 22px 22px;overflow-y: auto;flex: 1 1 auto;}

#onerm .body::-webkit-scrollbar {width: 6px;}

#onerm .body::-webkit-scrollbar-thumb {background-color: #ff4b3e;border-radius: 6px;}

#onerm .content .title {color: #fff;font-size: 44px;font-weight: 800;text-align: center;}

#onerm .content .title:before {content: "تخمین یک تکرار بیشینه شما";display: block;color: #9a9a9f;font-size: 12px;font-weight: 600;margin-bottom: 6px;}

#onerm .content .table-responsive {margin-top: 22px;border-radius: 10px;overflow: hidden;background-color: #0e0e10;}

#onerm .table {color: #fff;margin-bottom: 0;}

#onerm .table thead th {position: sticky;top: 0;background-color: #0e0e10;color: #ff4b3e;font-size: 12px;font-weight: 700;border-bottom: 1px solid rgba(255,255,255,.15);padding: 12px 8px;z-index: 1;}

#onerm .table td {border-bottom: 1px solid rgba(255,255,255,.06);padding: 12px 8px;font-size: 14px;position: relative;}

#onerm .table td:first-child {border-right: 3px solid transparent;}

#onerm .table tbody tr:nth-child(1) td:first-child,
#onerm .table tbody tr:nth-child(2) td:first-child,
#onerm .table tbody tr:nth-child(3) td:first-child {border-right-color: #ff4b3e;}

#onerm .table tbody tr:nth-child(4) td:first-child {border-right-color: #3ddc84;}

#onerm .table tbody tr:nth-child(5) td:first-child,
#onerm .table tbody tr:nth-child(6) td:first-child,
#onerm .table tbody tr:nth-child(7) td:first-child {border-right-color: #ffb020;}

#onerm .table tbody tr:nth-child(8) td:first-child {border-right-color: #4aa3ff;}

#onerm .table tr.highlight td {color: #3ddc84;font-weight: 700;background-color: rgba(61,220,132,.08);}

#onerm .table tbody tr:hover td {background-color: rgba(255,255,255,.03);}

#onerm .content .text {font-size: 12px;color: rgba(255,255,255,.55);line-height: 1.9;margin-top: 16px;text-align: center;}

@media (max-width: 576px) {

    #onerm {width: 92%;top: 6%;}

    #onerm .content .title {font-size: 32px;}

    #onerm .table td, #onerm .table thead th {font-size: 12px;padding: 9px 6px;}

}