/*
Theme Name: WpRentals Child theme
Theme URI: http://themeforest.net/user/wpestate
Description: Ultimate WordPress Theme created by WpEstate for accommodation booking. WpRentals is clean, flexible, fully responsive and retina Ready. Its smart settings allow you to build outstanding renting websites easily and fast.
Version: 2.7
Author: wpestate.org
Author URI: http://themeforest.net/user/annapx
Tags: white, one-column, two-columns,left-sidebar, right-sidebar, fluid-layout , custom-menu, theme-options, translation-ready
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: wprentals

-------------------------------------------------------------- */
.calculator-container {
    padding-bottom: 80px;
    margin-left: -100vw;
    margin-right: -100vw;
    background: #333333;
}


.result-container {
    display: flex;
    justify-content: center;
}

.calc-form {
    justify-content: center;
    display: flex;
    padding-bottom: 40px;
}

.calc-total,
.calc-total:hover,
.calc-total:active,
.calc-total:focus {
    box-shadow: none;
    padding: 13px 40px;
    background: #19C15E;
    text-transform: none;
    border: none;
}

.calc-total:hover {
     background-color: #54B576;
     color: #ffffff;
}

.calc-form .form-control,
.calc-form .calc-total {
    margin: 5px;
    border-radius: 24px;
}

.dollar-sign {
	position: relative;
}

.dollar-sign .form-control{
    padding-left: 30px;
}

.dollar-sign:before {
    position: absolute;
    content:"$";
    left: 15px;
	top: 19px;
}

.circle-label {
	display: flex;
  justify-content: center;
  color: #ffffff;
  font-weight: 500;
  padding-top: 20px;
}

.circle {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.circle-label .tooltip-parent {
  position: relative;
}

.circle-label .tooltip-parent img {
  padding: 0 0 2px 5px;
  cursor: pointer;
  width: 26px;
  vertical-align: middle;
}

.circle-label .tooltip-parent .tooltiptext-child {
  visibility: hidden;
  width: 385px;
  font-size: 14px;
  background-color: #ffffff;
  color: #0d0d0d;
  text-align: center;
  border-radius: 8px;
  padding: 8px 16px;
  line-height: 21px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 15px;
  left: 129%;
}

.circle-label .tooltip-parent:hover .tooltiptext-child {
  visibility: visible;
}

.btn-primary.calc-total:hover,
.btn-primary.calc-total:focus {
    outline: none;
}

.result {
	 height: 200px;
    width: 200px;
    line-height: 185px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    font-size: 48px;
    font-weight: 500;
    background: #19C15E content-box;
    border: 3px solid #ffffff;
    padding: 11px;
}

.result-block {
    margin: 0 50px 20px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@media (max-width: 768px) { 
	.calc-total {
		width: 100%;
    }

    .calculator-container{
        margin: 0;
    }

    .home .content_wrapper {
        background-color: #333333;
    }

    .calc-form,
    .result-container {
        flex-direction: column;
    }
    
    .result-block {
        margin: 0px 0px 20px 0px;
    }
 }
 @media (min-width: 768px) { 
	 .calc-form {
		 flex-wrap: nowrap;
	 }
 }