/* ---- iu-gpa-calculator.blade.php ---- */
.remove{
        position: absolute;
        top: 5px;
        right: 0;
    }

/* ---- bowling-score-calculator.blade.php ---- */
input{
        background-color: transparent;
        outline: none
    }
	table.scorecard {
        margin: 0 auto; 
        width:100%; 
        font-size:12px; 
        border:1px solid; 
        text-align: center; 
        table-layout: fixed; 
        margin-bottom: 20px;
    }
	table.scorecard th {border-bottom:1px solid black; background-color:var(--table-border); height:30px; color: #fff}
	table.scorecard th:not(:last-child) {border-right:1px solid black;border-bottom:1px solid black;}
	table.scorecard td {height:35px; background: rgba(255, 255, 255, 0.5);}
	table.scorecard tr td:not(:last-child) {border-right:1px solid;}
	table.scorecard tr:nth-child(2) td:nth-child(even) {border-bottom:1px solid;}
	table.scorecard tr:nth-child(2) td:last-child {border-bottom:1px solid;}
	table.scorecard tr{border:none}
	table.scorecard input{text-align: center; border: none !important; height: 1.25rem !important}
    .pins{justify-content: center;display: flex;flex-wrap: wrap; gap: 8px}
	.buttons input{height: 2.75rem !important;padding: 5px 22px;font-family: "Roboto", "Helvetica", "Arial", sans-serif;line-height: 1.75;border-radius: 4px;border: 1px solid rgba(0, 0, 0, 0.23)!important;width: 4rem; background-color: #fff; visibility: visible;}
    .buttons input:hover{background-color: rgba(255, 255, 255, 0.5);}

/* ---- how-many-words-calculator.blade.php ---- */
@media (max-width: 380px) {
        .calculator-box{
            padding-left: 0.5rem; 
            padding-right: 0.5rem; 
        }
    }
    .velocitytab .v_active{
        border-bottom: 3px solid var(--light-blue);
    }
    .velocitytab .v_active strong{
        color: var(--light-blue);
    }
    .velocitytab p{
        position: relative;
        top: 2px;
    }
    .active{
        background-color: var(--light-blue);;
        color: white;
    }
    .select2 {
        width: 100% !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 6px !important;
    }
    .select2-container .select2-selection--single {
        height: 40px !important;
        border: 1px solid #D2D4D8 !important;
        border-radius: 10px !important;
    }
    .select2-selection__rendered{
        padding-top: 5px !important; 
    }

/* ---- hourly-pay-calculator.blade.php ---- */
#add_hour:hover, #add_overtime:hover{
        text-decoration: underline
    }
    .input-unit{
        top: 21px !important
    }

/* ---- how-many-pages-calculator.blade.php ---- */
@media (max-width: 380px) {
        .calculator-box{
            padding-left: 0.5rem; 
            padding-right: 0.5rem; 
        }
    }
    .velocitytab .v_active{
        border-bottom: 3px solid var(--light-blue);
    }
    .velocitytab .v_active strong{
        color: var(--light-blue);
    }
    .velocitytab p{
        position: relative;
        top: 2px;
    }
    .active{
        background-color: var(--light-blue);;
        color: white;
    }
    .select2 {
        width: 100% !important;
    }

/* ---- tire-size-calculator.blade.php ---- */
.pacetabs{
        left: 16.6%;
    }
    @media (max-width: 991px){
        .pacetabs{
            left: 0;
        }
    }
    .d-center{
        display: flex;
        align-items: center;
        justify-content: center
    }
    .px-10{
        padding-left: 10px;
        padding-right: 10px
    }
    .go_plus{
        text-decoration: underline
    }
    .go_plus:hover{
        cursor: pointer
    }
    #gotosize{
        display: none
    }
    .tire_wrap{
        position: relative;
        display: inline-block;
    }
    #ww{
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: width 1s,height 1s,top 1s,left 1s;
        transition: width 1s,height 1s,top 1s,left 1s,transform .5s;
    }
    #tt{
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
        border-radius: 93px;
        overflow: hidden;
    }
    #aa{
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
        z-index: 2;
        border-radius: 100%;
    }
    #cc{
        width: 185px;
        height: 185px;
        overflow: hidden;
        position: relative;
        display: inline-block;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #cal_comp1 {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin-bottom: 50px;
    }
    #vis_arrow {
        position: absolute;
        left: 0px;
        bottom: 5px;
        -webkit-transform: rotate(43deg);
        transform: rotate(43deg);
    }
    #t_wheel {
        border: 1px solid #a0a0a0;
        border-bottom: none;
        position: absolute;
        right: 50px;
        top: -15px;
        height: 100px;
        width: 85px;
        text-align: center;
        z-index: 2;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s,right 1s;
    }
    #t_side {
        border: 1px solid #a0a0a0;
        border-left: none;
        position: absolute;
        right: 10px;
        bottom: 2px;
        height: 50px;
        width: 80px;
        text-align: right;
        z-index: 2;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #vis_revs {
        position: absolute;
        bottom: -20px;
        width: 100%;
        text-align: center;
    }
    #vis_side {
        padding: 2px 0px 5px 3px;
        height: 10px;
        display: inline-block;
        margin: 25px -12px 0px 0px;
        -webkit-transition: margin 1s;
        transition: margin 1s;
    }
    #vis_wheel {
        padding: 0px 5px 0px 5px;
        width: 20px;
        margin: -10px auto 0px auto;
    }
    #cal_visualizer {
        float: left;
        width: 100%;
        text-align: center;
        font-size: 12px;
        position: relative;
    }
    #cal_wrap {
        position: relative;
        width: 100%;
        min-height: 421px;
        margin-top: 25px;
        float: right;
        background-color: var(--newageForm);
        overflow: hidden;
        border-radius: 2px;
        text-align: center;
        z-index: 1;
        border-radius: 10px
    }
    #cal_viewer {
        padding-top: 30px;
        clear: both;
        height: 225px;
    }
    #cal_comp2 {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin-bottom: 50px;
        padding: 0px 0px 0px 30px;
    }
    #tctc {
        width: 63px;
        height: 185px;
        position: relative;
        display: inline-block;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #tt_width {
        border: 1px solid #a0a0a0;
        border-top: none;
        position: absolute;
        bottom: -15px;
        height: 12px;
        width: 98%;
        text-align: center;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #tt_height {
        border: 1px solid #a0a0a0;
        border-right: none;
        position: absolute;
        left: -20px;
        top: 0px;
        height: 97%;
        width: 15px;
        text-align: center;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #show_tires {
        height: 20px;
        text-align: center;
        font-size: 16px;
        padding: 10px 0px 10px 0px;
    }
    #cc img {
        width: 100%;
        height: 100%;
        border: none
    }
    .getcalcs {
        width: 150px;
        height: 32px;
        padding-top: 5px;
        margin: 20px auto 25px auto;
        background-color: #2083d4;
        border-radius: 2px;
        text-align: center;
        font-size: 20px;
        line-height: 26px;
        color: #f0f0f0;
    }
    #CompVisualizer {
        width: 100%;
        text-align: center;
        font-size: 12px;
        display: none;
    }
    #Viewer {
        padding-top: 30px;
        clear: both;
        background-color: #dddddd57;
    }
    #ShowCompTires {
        text-align: center;
        font-size: 16px;
        padding: 10px 0px 10px 0px;
    }
    #ShowCompTires span {
        width: 21px;
        height: 21px;
        background-image: url(/images/imgsprite.png);
        background-position: -11px -39px;
        background-size: 135px;
        display: none;
    }

    #spin2 {
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    #comp2 {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin-bottom: 50px;
        padding: 0px 35px 0px 35px;
    }
    #tc1 {
        width: 63px;
        height: 185px;
        position: relative;
        display: inline-block;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #tt_width1 {
        border: 1px solid #a0a0a0;
        border-top: none;
        position: absolute;
        bottom: -15px;
        height: 12px;
        width: 98%;
        text-align: center;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #viswidth1 {
        margin-top: 6px;
        padding: 0px 5px 0px 5px;
        background-color: #f0f0f0;
        display: inline-block;
    }
    #tt_height1 {
        border: 1px solid #a0a0a0;
        border-right: none;
        position: absolute;
        left: -20px;
        top: 0px;
        height: 97%;
        width: 15px;
        text-align: center;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #visheight1 {
        padding: 5px 0px 8px 0px;
        background-color: #f0f0f0;
        height: 10px;
        display: inline-block;
        margin: 80px 0px 0px -12px;
        -webkit-transition: margin 1s;
        transition: margin 1s;
    }
    #tc2 {
        width: 63px;
        height: 185px;
        overflow: hidden;
        position: relative;
        display: inline-block;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #tt_width2 {
        border: 1px solid #f1a400;
        border-top: none;
        position: absolute;
        bottom: -15px;
        height: 12px;
        width: 98%;
        text-align: center;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #tt_height2 {
        border: 1px solid #f1a400;
        border-left: none;
        position: absolute;
        right: -20px;
        top: 0px;
        height: 98%;
        width: 15px;
        text-align: center;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #viswidth2 {
        margin-top: 6px;
        padding: 0px 5px 0px 5px;
        background-color: #f0f0f0;
        display: inline-block;
    }
    #visheight2 {
        padding: 5px 0px 8px 3px;
        background-color: #f0f0f0;
        height: 10px;
        display: inline-block;
        margin: 80px -12px 0px 0px;
        -webkit-transition: margin 1s;
        transition: margin 1s;
    }
    #comp1 {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin-bottom: 50px;
    }
    #c1 {
        width: 185px;
        height: 185px;
        overflow: hidden;
        position: relative;
        display: inline-block;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #t_wheel1 {
        border: 1px solid #a0a0a0;
        border-bottom: none;
        position: absolute;
        right: 50px;
        top: -15px;
        height: 100px;
        width: 85px;
        text-align: center;
        z-index: 2;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s,right 1s;
    }
    #vis_wheel1 {
        padding: 0px 5px 0px 5px;
        background-color: #f0f0f0;
        width: 20px;
        margin: -6px auto 0px auto;
    }
    #vis_side1 {
        padding: 2px 0px 5px 3px;
        background-color: #f0f0f0;
        height: 10px;
        display: inline-block;
        margin: 25px -12px 0px 0px;
        -webkit-transition: margin 1s;
        transition: margin 1s;
    }

    #vis_revs1 {
        position: absolute;
        bottom: -20px;
        width: 100%;
        text-align: center;
    }
    #c2 {
        width: 185px;
        height: 185px;
        overflow: hidden;
        display: inline-block;
        position: relative;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #vis_arrow1 {
        position: absolute;
        left: 0px;
        bottom: 5px;
        -webkit-transform: rotate(43deg);
        transform: rotate(43deg);
    }
    #vis_arrow2 {
        position: absolute;
        right: 6px;
        bottom: 15px;
        -webkit-transform: rotate(-43deg);
        transform: rotate(-43deg);
    }
    #t_wheel2 {
        border: 1px solid #f1a400;
        border-bottom: none;
        position: absolute;
        right: 50px;
        top: -15px;
        height: 100px;
        width: 85px;
        text-align: center;
        z-index: 2;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #t_side2 {
        border: 1px solid #f1a400;
        border-right: none;
        position: absolute;
        left: 10px;
        bottom: 2px;
        height: 50px;
        width: 80px;
        text-align: left;
        z-index: 2;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #vis_wheel2 {
        padding: 0px 5px 0px 5px;
        background-color: #f0f0f0;
        width: 20px;
        margin: -6px auto 0px auto;
    }
    #vis_side2 {
        padding: 2px 3px 5px 0px;
        background-color: #f0f0f0;
        height: 10px;
        display: inline-block;
        margin: 25px 0px 0px -8px;
        -webkit-transition: margin 1s;
        transition: margin 1s;
    }
    #vis_revs2 {
        position: absolute;
        bottom: -20px;
        width: 100%;
        text-align: center;
    }
    #comparespeed {
        margin: 20px 0px 20px 0px;
        display: inline-block;
        text-align: center
    }
    .bigtext {
        font-size: 16px;
    }
    #reading {
        display: inline-block;
        vertical-align: top;
        margin-left: -9px;
    }
    #actual {
        display: inline-block;
        vertical-align: top;
    }
    #comparespeed input {
        display: inline-block;
        border: none;
        background-color: #f3964c;
        margin: 3px 0px 0px 5px;
        border-radius: 2px;
        height: 20px;
        text-align: center;
        width: 70px;
    }
    #a1 {
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
        z-index: 2;
        border-radius: 100%;
    }
    #t1 {
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
        border-radius: 93px;
        overflow: hidden;
    }
    #t2 {
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
        border-radius: 93px;
        overflow: hidden;
    }
    #a2 {
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
        z-index: 2;
        border-radius: 100%;
    }
    #c1 img, #c2 img {
        width: 100%;
        height: 100%;
    }
    #w1 {
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: width 1s,height 1s,top 1s,left 1s;
        transition: width 1s,height 1s,top 1s,left 1s;
    }
    #w2 {
        width: 185px;
        height: 185px;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-transition: width 1s,height 1s,top 1s,left 1s;
        transition: width 1s,height 1s,top 1s,left 1s;
    }
    #resultstab {
        float: right;
        text-align: left;
        width: 100%;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    #ShowAlternate {
        height: 30px;
        text-align: center;
        font-size: 16px;
        padding: 10px 0px 10px 0px;
    }
    #SizeTabWrap {
        height: 26px;
        display: none;
    }
    #SizeTabWrap a {
        padding: 5px 10px 5px 10px;
        margin-right: 5px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        color: #333;
        display: inline-block;
        vertical-align: top;
        min-width: 40px;
        text-align: center;
        text-decoration: none;
    }
    #SizeTabWrap a:hover{
        cursor: pointer
    }
    .num_selected {
        background-color: #f0f0f0;
    }
    .num_unselected {
        background-color: #d0d0d0;
    }
    #DisplayTires1 {
        position: relative;
        right: 0px;
        -moz-transition: -moz-transform .5s;
        -webkit-transition: -webkit-transform .5s;
        transition: transform .5s;
    }
    #SizeTable {
        width: 100%;
        text-align: left;
        border-spacing: 0px 5px;
        overflow: hidden;
        color: #222;
        background: #f0f0f0;
    }
    .dontshow {
        display: none;
    }
    .dia {
        background-color: #fff;
    }
    .diaover {
        background-color: #f5f5f5;
    }
    #SizeTable td:nth-child(1) {
        padding-left: 5px;
    }
    #SizeTable td:nth-child(2) {
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        background-color: #f5f5f5;
    }
    #SizeTable td {
        line-height: 1;
        text-align: left;
        border-bottom: 1px solid #e5e5e5;
        padding: 17px 5px 0px 5px;
        height: 32px;
        vertical-align: top;
    }
    #DisplayTires1 a {
        text-decoration: underline;
        cursor: inherit;
    }

    .SizeLink {
        color: #0059d8;
        text-decoration: underline;
    }
    #SizeTable td span {
        font-size: 11px;
        margin: 1px 10px 0px 0px;
        font-weight: normal;
    }
    .greyspan {
        color: #a0a0a0;
    }
    #MoreSizes {
        text-decoration: underline;
        cursor: pointer;
        margin: 5px;
        text-align: center;
    }
    #SizeChange {
        text-align: center;
        margin: 20px 0px 10px 0px;
    }
    #CalcEquivs {
        margin: 0px auto 0px auto;
        display: none;
    }
    .sep {
        height: 10px;
    }
    #mconvert {
        position: relative;
        width: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        border-radius: 13px;
    }
    #slid {
        position: absolute;
        top: 0;
        left: 0;
        width: 45px;
        height: 100%;
        border-radius: 13px;
        background: #9b9b9b4d
    }
    #mm {
        float: left;
        padding: 5px;
    }
    #in {
        float: left;
        padding: 5px;
    }
    #mconvert:hover{
        cursor: pointer
    }
    #calctab {
        position: relative;
    }
    #t_side1 {
        border: 1px solid #a0a0a0;
        border-left: none;
        position: absolute;
        right: 10px;
        bottom: 2px;
        height: 50px;
        width: 80px;
        text-align: right;
        z-index: 2;
        -webkit-transition: width 1s,height 1s;
        transition: width 1s,height 1s;
    }
    #a2 img{
        width: 173px;
        height: 173px
    }
    .result_area{
        background-image: var(--bs-gradient);
        color: #fff;
        margin: 20px 0;
        text-align: center;
        border-radius: 5px
    }
    #comparespeed span {
        font-size: 11px;
    }

/* ---- distance-calculator.blade.php ---- */
#res_sect{
        overflow-x:auto;
    }

    .content {
        overflow-x:auto !important;
    }

/* ---- asu-gpa-calculator.blade.php ---- */
.remove{
        position: absolute;
        top: 5px;
        right: 0;
    }
    .current_inp{
        transition: display 0.5s ease-in-out;
    }

/* ---- average-time-calculator.blade.php ---- */
.mera_table table thead tr {
        margin-top: 10px !important;
    }
    .filled-in{
        width: 15px;
        height: auto;
        margin-right: 10px
    }
    [type="checkbox"] + span:not(.lever) {
        position: relative;
        cursor: pointer;
        display: inline-block;
        font-size: 1rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input[type="number"]:not(.browser-default):disabled{
        color: rgba(0, 0, 0, 0.42)
    }
    .time_table tbody tr .plus {
        font-size: 30px;
        margin-bottom: 12px !important;
    }
    .time_table tbody tr p {
        font-size: 20px;
        margin-bottom: 12px !important;
    }
    .mera_table table tr {
        border-bottom: 0px !important;
    }
    .del_btn {
        padding: 12px
    }
    .add {
        padding-right: 42px
    }
    .add_btn {
        border-radius: 10px !important;
        float: right
    }
    .khali_div td {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
    td ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: var(--pClr) !important;
    }
    #remove{
        cursor: pointer
    }
    input[type="number"]:disabled {
        cursor: not-allowed
    }
    .result tr{
        border-bottom: 2px solid #ddd !important
    }
    .result tr:last-child{
        border-bottom: none !important
    }
    @media (max-width: 480px){
        .border_form{
            padding: 10px !important
        }
        .add{
            margin-right: 0px !important;
            margin-top: 10px !important
        }
    }
    table tr td {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    td{
        padding: 15px 5px;
        display: table-cell;
        text-align: left;
        vertical-align: middle;
        border-radius: 2px;
    }
    .p_5{
        padding: 5px
    }

    .mera_table input::placeholder{
        color: #888 !important;  
    }