html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
}

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
.rtl {direction: rtl;}
.ltr {direction: ltr;}

textarea:focus, input:focus{
    outline: none;
}

.margin-bottom-30 {margin-bottom:30px;}

body{font-size14px; direction: rtl;
    background-image: url("../../images/external_calculators/freezing_mortgage/freezing_mortgage_bg.jpg");
    background-repeat: no-repeat;
font-family: 'Rubik', sans-serif;}

.width-15{width: 15%}
.width-20{width: 20%}
.width-25{width: 25%}
.width-30{width: 30%}
.width-35{width: 35%}
.width-50{width: 50%}
.width-80{width: 80%}
.width-100{width: 100%}


.float-left{float: left}
.float-right{float: right}
.text-center{text-align: center}



.no-border{
    border:0!important;
    border-radius: 0px;
    outline: 0;
    background-color: transparent;}

.wrapper {padding-bottom:50px;}
.wrapper .page-top {background-color: #f5f2ed; width:100%; float:right;}
.wrapper .page-top .logo {float:right; max-width: 250px; padding:8px 0; margin-right:2%;}
.wrapper .page-top .logo img {width:100%; border:0;}

.wrapper .page-center {float: right; width: 100%; padding-top:20px; }

.wrapper .page-center .description{width:20%; margin-right:2%; padding:0 30px; float:right!important;}
.wrapper .page-center .description h1 {font-size: 35px; color:#be8b30; font-weight: bold; line-height: 50px; }
.wrapper .page-center .description h1 span {color:#444444;}
.wrapper .page-center .description h2 {font-size: 18px; color:#444444; font-weight: bold;}

.wrapper .page-center .item {float: right; width: 60%;}

.wrapper .content-input {float: right; width:100%; background: #fefefe; margin-bottom:20px;}
.wrapper .content-input .add-more-mortgage {padding:6px 18px; margin-top:6px;}
.wrapper .content-input .mortgage {float: right; width:100%; position: relative;}
.wrapper .content-input .mortgage .remove-btn {width:30px; position: absolute; right:18px; top:10px; color:#d3cccc; cursor: pointer;}
.wrapper .content-input .mortgage .remove-btn:hover {color:#a5a0a0;}

.wrapper .content-input .input{float:right; width:33.33%; text-align: center; padding: 0 20px;}
.wrapper .content-input .input.grace {background: #ebc37b;}
.wrapper .content-input .input.grace label {color: #302e2e;}
.wrapper .content-input .input.grace .value{border-bottom:1px solid #fff; }
.wrapper .content-input .input.grace .value input{width:100%; background: transparent; color:#786f5e;}
.wrapper .content-input .input label{font-weight: bold; color:#000; font-size: 14px; padding-top:20px; display: block;}
.wrapper .content-input .input .value{border-bottom:1px solid #444444; padding:10px 0;}
.wrapper .content-input .input .value input{border:0; text-align: center; font-size: 16px; color:#000; width:85%; float: right;}
.wrapper .content-input .input .value span{font-size: 18px; color:#aaa7a2; width:15%; float: left;}
.wrapper .content-input .note {color: #00bf33; font-size: 15px; text-align: right; padding:10px;}

.wrapper .content-wrapper {float: right; width: 100%; }
.wrapper .content-wrapper .content {float: right; background: #fdfdfd; }
.wrapper .content-wrapper .content.bank {margin-top:20px;}
.wrapper .content-wrapper .content.bank .content-title {background: #be8b30; display: block; min-height: 160px;}
.wrapper .content-wrapper .content.bank .content-title h3 {color:#fff; padding:20px; line-height: 22px;}
.wrapper .content-wrapper .content.bank .content-title h3 span {color:#fff; font-size:14px; display: block; line-height: 15px; font-weight: normal;}
.wrapper .content-wrapper .content.bank .content-label, .wrapper .content-wrapper .content.bank .content-output {min-height: 160px;}
.wrapper .content-wrapper .content.bank .content-label  {background: #fcf9f5;}
.wrapper .content-wrapper .content.bank .content-label  label {font-weight: bold;}
.wrapper .content-wrapper .content.bank .content-output .content-output-fields {background: #f7f1e7!important;}
.wrapper .content-wrapper .content.content-edge-with-change {padding-bottom:15px;}
.wrapper .content-wrapper .content .content-main-title {float: right; width: 100%; text-align: left;}
.wrapper .content-wrapper .content .content-main-title .content-main-title-blank {float: right; width: 55%; display:inline-block;}
.wrapper .content-wrapper .content .content-title h3 {color: #be8b30; font-weight: bold; font-size: 17px; padding:10px 20px 0 10px; line-height: 24px;}
.wrapper .content-wrapper .content .content-main-title .grace-title {color:#fff; text-align: center;float: right; background-color: #aaa7a2; font-weight: bold; font-size: 16px; width:15%; padding:6px 0;}
.wrapper .content-wrapper .content .content-main-title .grace-title .fa-question-circle {font-size:12px; cursor: pointer;}
.wrapper .content-wrapper .content .content-main-title .grace-title.full {background-color: #c4c1be; }
.wrapper .content-wrapper .content .content-title {float: right; width: 18%;}
.wrapper .content-wrapper .content .content-label {float: right; width: 37%; padding-right:2%;}
.wrapper .content-wrapper .content .content-label .label {width:100%; float: right;  line-height: 26px; border-bottom:1px solid #a8a39c; color:#444444; font-size: 18px; height: 26px; margin-top:5px;}
.wrapper .content-wrapper .content .content-output {float: right; width: 45%;}
.wrapper .content-wrapper .content .content-output .content-output-fields {float: right; width: 33.33%;}
.wrapper .content-wrapper .content .content-output .content-output-fields .field { background: transparent; border-bottom:1px solid #a8a39c; height: 26px;  margin-top:5px;}
.wrapper .content-wrapper .content .content-output .content-output-fields.content-output-grace-partial {background: #f9f9f8;}
.wrapper .content-wrapper .content .content-output .content-output-fields.content-output-grace-full {background: #fdfdfd;}
.wrapper .content-wrapper .content .content-output .content-output-fields .field input{text-align: center; color:#be8b30; border:0; font-weight: bold; font-size: 14px; padding:0; width:100%; height: 26px; direction: ltr;}


.wrapper .page-footer{background: #f5f2ed; margin-top:30px; height: 30px;position: fixed;    bottom: 0;    width: 100%;}
.wrapper .page-footer .copyrights { width:100%; float: right; }
.wrapper .page-footer .copyrights .text, .wrapper .page-footer .copyrights .terms{ width:50%; padding:15px 0; color:#c49746; font-size: 16px;  line-height: 0;}
.wrapper .page-footer .copyrights .text {float:right; text-align: right; padding-right: 2%; background: #f5f2ed; width:50%;}
.wrapper .page-footer .copyrights .terms {float:left; text-align: left; padding-left: 2%; background: #f5f2ed; width:50%;}
.wrapper .page-footer .copyrights .text a{ color:#444444; font-size: 16px; text-decoration: none;}


@media screen and (max-width: 1380px) {

    .wrapper .page-center .description {width:100%; margin: 0 auto; float: initial; text-align: center;}
    .wrapper .page-center .item {float: initial; width: 90%; margin: 15px auto;}
    .wrapper .content-wrapper { width:100%;}
}

@media screen and (max-width: 1160px) {
    .wrapper .page-footer {height: initial;}
    .wrapper .page-footer .copyrights .text, .wrapper .page-footer .copyrights .terms {width:100%; text-align: center;}
    .wrapper {padding-bottom: 80px;}
}

@media screen and (max-width: 900px) {
    .wrapper .content-input .input {width:50%;}
    .wrapper .page-footer {position: initial;}
}

@media screen and (max-width: 680px) {
    .wrapper .content-wrapper .content .content-title {width:100%; padding:10px;}
    .wrapper .content-wrapper .content .content-title h3 {padding:0;}
    .wrapper .content-wrapper .content .content-label, .wrapper .content-wrapper .content .content-main-title .content-main-title-blank {width:60%;}
    .wrapper .content-wrapper .content .content-main-title .grace-title {width:20%;}
    .wrapper .content-wrapper .content .content-output {width:40%;}
    .wrapper .content-wrapper .content.bank .content-title {min-height: initial;}
    .wrapper .page-footer .copyrights .text, .wrapper .page-footer .copyrights .terms {line-height: initial;}
    .wrapper {padding-bottom: 120px;}
}

@media screen and (max-width: 580px) {
    .wrapper .content-wrapper .content .content-label .label {height: initial;}
    .wrapper .content-wrapper .content .content-main-title .grace-title {font-size: 14px;}
}

@media screen and (max-width: 560px) {
    .wrapper {padding-bottom: 140px;}
}

@media screen and (max-width: 480px) {
    .wrapper .content-input .input {width:100%; padding:0;}
    .wrapper .content-input .input label {padding-top:10px;}
    .wrapper .content-input .input .value {padding:4px 0;}
    .wrapper .content-input .input .value input {width:100%;}
    .wrapper .content-input .input .value span {display: none;}
    .wrapper .content-wrapper .content .content-label .label {font-size: 14px;}
    .wrapper {padding-bottom: 160px;}
}