.goldDiv{margin-bottom:40px}
.economy .main{margin-bottom:0}
.economy .main p { display: inline-block; width: 100%; margin: 0 0 12px ;  font-size: 14px; color: #1D1D1D; text-align: right; direction: rtl }
.economy .main p span { color: #666; margin-right: 5px }
.economy .currDiv { float: right; display: inline-block; width: calc(100% - 320px); margin-left: 20px; padding: 0; background: none; box-shadow: none; margin-bottom: 0; }
.economy .currGoldTable { float: right; width: 100%; border: 1px solid #e8e8e8;border-radius:8px;overflow:hidden }
.economy .currGoldTable .title { display: inline-block; width: 100%; float: right;    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;height:50px;background:#111111; }
.warning{display:none;width:100%;color:red;font-size:15px;margin-bottom:10px}
.warning.show{display:block}
.economy .currGoldTable .title .name { width: 300px;  font-size: 14px; color: #fff; text-align: center;border-left: 1px solid #FFF;font-family:AvenirMeduim,Arial}
.economy .currGoldTable .title .name:last-child{border-left:0}
.economy .currGoldTable .title .name:first-child { width: calc(100% - 300px) ;text-align:center;padding-right:10px}
.economy .currGoldTable .currGoldDtls { display: inline-block; width: 100%; float: right; height: 46px; overflow: hidden; border-bottom: 1px solid rgba(232, 232, 232, 0.91) ;display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;height:54px}
.economy .currGoldTable .currGoldDtls:last-child { border-bottom: none }
.economy .currGoldTable .currGoldDtls .item { float: right; width: 300px;  cursor: auto; font-size: 14px; line-height: 46px; color: #1d1d1d;text-align: center; display: block }
.economy .currGoldTable .currGoldDtls .item:first-child { width: calc(100% - 300px) }
.economy .currGoldTable .currGoldDtls .item:last-child { border-left: 0 }
.economy .currGoldTable .currGoldDtls .item img { float: right; width: 20px; height: 20px; border-radius: 50%; margin: 13px 10px 0; }
.economy .currGoldTable .currGoldDtls .item p { line-height: 46px; font-size: 15px; text-align: center }
.economy .currGoldTable .currGoldDtls .item.flag h1 { font-size: 13px; text-align: right }
.economy .currGoldTable .currGoldDtls:nth-child(even) { background: #F5F5F5 }
.economy .currGoldTable .currGoldDtls:nth-child(odd) { background: #fff }
.economy   .currGoldTable .currGoldDtls .changeRate:before{content:'';width: 16px;height: 16px;}
.economy   .currGoldTable .currGoldDtls .changeRate{    display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 6px;    flex-direction: row-reverse;direction:ltr;font-family:AvenirMeduim,Arial;font-weight:700}
.economy   .currGoldTable .currGoldDtls .changeRate.up{color:#056818;}
.economy   .currGoldTable .currGoldDtls .changeRate.down{color:#E03322;}
.economy   .currGoldTable .currGoldDtls .changeRate.up:before{background:#056818;mask:url(../Images/goldUp.svg) no-repeat center center;-webkit-mask:url(../Images/goldUp.svg) no-repeat center center;mask-size:contain}
.economy   .currGoldTable .currGoldDtls .changeRate.down:before{background:#E03322;mask:url(../Images/goldDown.svg) no-repeat center center;-webkit-mask:url(../Images/goldDown.svg) no-repeat center center;mask-size:contain}
.economy   .currGoldTable .title .name { width: calc(100% / 2) !important }
.economy   .currGoldTable .title .name:first-child { min-width: initial }
.economy   .currGoldTable .currGoldDtls .item { width: calc(100% / 2) !important }
.economy   .currGoldTable .currGoldDtls .item:first-child { min-width: initial; font-size: 14px }

.goldContent{
    border-radius: 8px;
border: 1px solid #E8E8E8;
background: #FFF;
width:100%;
display:flex;
flex-direction:column;
gap:24px;
padding:24px 16px 16px
}

/*godl chart*/
.goldChart{width:100%;display:flex;flex-wrap:wrap;margin-bottom:25px;border-radius: 8px;
border: 1px solid #E8E8E8;
background: #F5F5F5;
padding:16px
}
.goldChart .ttl:before{display:none}
.goldChart .ttl h2{font-size:20px}
.goldChart .gold-widget {direction: rtl; width: 100%; margin: auto;}
.goldChart .controls {display: flex;justify-content: space-between; margin-bottom: 15px;border-bottom: 1px solid #E5E7EB;    padding-bottom: 15px;}

.goldChart .karat-select select { padding: 6px;}
.goldChart .stats {display: flex;justify-content: flex-start;margin-bottom: 20px;text-align: center;gap:44px}
.goldChart .stats .fieldName {font-size: 12px; color: #1D1D1D;font-family:AvenirMeduim,Arial}
.goldChart .stats .changeDiv{display: flex; justify-content: flex-start; align-items: center;   gap: 3px;flex-wrap: wrap;}
.goldChart .stats .priceField {font-size: 17px; color: #1D1D1D;font-family:AvenirLight,Arial}
.goldChart .stats  span{font-size: 11px}
.goldChart .stats span.percentage{font-size: 11px;margin-right:3px;}
.goldChart .stats span.percentage.up{color:#056818}
.goldChart .stats span.percentage.down{color:#E03322}

.selectDiv p{color: #1D1D1D;font-family:AvenirMeduim,Arial;font-size: 14px;}
.period{display:flex;justify-content: center;align-items: center;gap:8px;flex-wrap:wrap}
.period button{display: flex;padding: 6px 13px;justify-content: center;align-items: center;background: #F5F5F7;color: #1D1D1D;font-size: 14px;font-family:AvenirLight,Arial;    border-radius: 8px;}
.period button.active{background: #E03322;color:#fff}


.karatDropDown {position: relative; width: 245px;height: 40px; border: 0.5px solid rgba(0, 0, 0, 0.20); background: #FFF;    border-radius: 8px;}
.karatDropDown .dropdown-btn {width: 100%;padding: 0 10px;cursor: pointer;text-align: left;color:#1D1D1D;font-size:14px;font-family:AvenirLight,Arial;text-align: right;display: flex;align-items: center;height: 100%;justify-content: space-between;}
.karatDropDown .dropdown-btn:after { content: 'r';  color: #E03322;font-size: 11px;  transform: rotate(90deg); }

.karatDropDown .dropdown-menu {position: absolute;top: 39px;left: 0;right: 0;background: white;border: 0.2px solid rgba(0, 0, 0, 0.50);border-top: none;max-height: 268px;overflow-y: auto;opacity: 0;transform: translateY(-10px);pointer-events: none;transition: 0.2s ease;z-index: 10;    border-radius:0 0 8px 8px;}
.karatDropDown.open .dropdown-menu {  opacity: 1;  transform: translateY(0); pointer-events: all;}
.karatDropDown .dropdown-item {padding: 5px 12px;cursor: pointer;font-size: 14px;text-align: right;border-bottom: 0.2px solid rgba(0, 0, 0, 0.50);background: #FFF;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);}
.karatDropDown .dropdown-item:hover,
.karatDropDown .dropdown-item.active { background: #f0f0f0;}

.dateBox{display:flex;flex-wrap:wrap;gap:110px;justify-content:space-between}
.flatpickr-calendar{direction:rtl!important}
.flatPickerDiv span{  direction: rtl;
  text-align: right;  display: flex;
    justify-content: center;
    align-items: center;width: 34px;height: 34px;    background: #fcebe9;
    border-radius: 5px;
    border: 1px solid #f92b2b;}
.flatPickerDiv span:before{content:'';display:block;width:80%;height:80%;background:#e03322;mask:url(../Images/Time.svg) no-repeat center center;-webkit-mask:url(../Images/Time.svg) no-repeat center center;}

.flatPickerDiv span.active,
.flatPickerDiv span.selected{background:#e03322;border:1px solid #e03322}
.flatPickerDiv span.active:before,
.flatPickerDiv span.selected:before{background:#fff;}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange{border-radius: 0 50px 50px 0!important;}
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange{border-radius:50px 0 0 50px!important}


/* gold calcultaor*/
.calc-data{width:100%;display:flex;flex-wrap:wrap;margin-bottom:25px;justify-content:space-between}
.right-data{width:calc(50% - 12px);padding:12px;border: 1px solid #E5E7EB; text-align: right;    border-radius: 8px;background:#fff}
.title-data{color: #1D1D1D;
font-family: AvenirMeduim,Arial;
font-size: 16px;
margin-bottom:12px;
position:relative
   
}
.right-data input{width:100%;color: rgba(29, 29, 29, 0.50);
font-family:  AvenirLight,Arial;
font-size: 14px;
border: 1px solid #D1D5DC;
height: 40px;
padding: 12px 16px;
    border-radius: 8px;
}
.right-data.right .title-data:before{
    content:'جنيه';
        display: inline-block;
    position: absolute;
    width: 27px;
    height: 22px;
    left: 16px;
    top: 164%;
    color: #6A7282;
font-family: AvenirLight,Arial;
font-size: 14px;
    border-radius: 8px;
}
.right-data  button{
    border: 1px solid #D1D5DC;
background: #FFF;
width:85px;
height:40px;
line-height:40px;
color: #1D1D1D;
font-family: AvenirMeduim,Arial;
font-size: 13px;
border-radius:8px

}

.right-data  button.selected{
    border: 1px solid #E03322;
background: #E03322;
color:#fff
}
.right-data .price{color: #6A7282;
font-family:AvenirLight,Arial;
font-size: 12px;
margin-top:15px;
    border-radius: 8px;
}

.choose-period{display:flex;flex-wrap:wrap;width:100%;align-items:center;}
.choose-period .title-data{margin-bottom:0;    width: 16%;}
.choose-period .karatDropDown{width:81%}
.period-data{display:flex;flex-wrap:wrap;gap:6px;width: 84%;}
.choose-period #calcBtn{background: #E03322;display: inline-flex;
padding: 6px 0 ;
justify-content: center;
align-items: center;
color: #FFF;
font-family: AvenirMeduim,Arial;
font-size: 14px;
 border-radius: 8px;
 width:17%
}

@media screen and (min-width:1280px) and (max-width:1919px) {
        .economy .currGoldTable .title .name{font-size:12px}
        .title-data{font-size:15px}
        .choose-period .title-data{width:17%}
        .period-data{width:82%}
}
@media screen and (min-width:1024px) and (max-width:1279px){

    .goldChart .controls {flex-direction: column;gap: 10px;}
  .karatDropDown {width:100%}
      .period button {    padding: 3px 8px;}
      .selectDiv p{font-size:13px}
      .goldChart .stats {gap:10px;flex-wrap:wrap}
      .goldChart .stats .statsBox{width:47%}

    .right-data button{width:77px}
   

}
@media screen and (min-width:1024px) and (max-width:1162px) {
    .economy .currGoldTable .title .name { width: calc((100% - 150px) / 3) }
    .economy .currGoldTable .currGoldDtls .item { width: calc((100% - 150px) / 3) }
}
@media screen and (min-width:320px) and (max-width:638px) {
    .economy .currGoldTable .title .name { width: calc((100% - 150px) / 3) }
    .economy .currGoldTable .currGoldDtls .item { width: calc((100% - 150px) / 3) }
}

@media screen and (min-width:768px) and (max-width:1279px) {
            .economy .currGoldTable .title .name{font-size:12px}
.economy   .currGoldTable .currGoldDtls .item{font-size:12px!important}

    .right-data{width:100%}
    .calc-data{gap:10px}
    .choose-period .title-data{width:100%}
    .period-data {width:100%}
    .choose-period .karatDropDown { width: 75%;}
    .choose-period #calcBtn{width:23%}
}

@media screen and (min-width:320px) and (max-width:767px) {
         .economy   .currGoldTable .currGoldDtls .item{font-size:12px;    line-height: 16px;}
     .economy   .currGoldTable .currGoldDtls .item:first-child{font-size:11px!important}
     .economy   .currGoldTable .currGoldDtls .changeRate{font-size:10px;flex-direction:column;gap:0}
              .economy .currGoldTable .title .name{font-size:11px;border-left:0}
              .economy .currGoldTable .title{height:30px}
.economy   .currGoldTable .currGoldDtls .changeRate:before {
    width: 12px;
    height: 12px;
}
.goldChart .gold-widget{background:unset;border:0;box-shadow:unset;padding:0}
.goldChart .controls {flex-direction: column;gap: 10px;}
  .karatDropDown {width:100%}
      .period button {    padding: 3px 8px;background:#fff}
      .selectDiv p{font-size:13px}
      .goldChart .stats {gap:10px;flex-wrap:wrap;        justify-content: space-between;}
      .goldChart .stats .statsBox{width: 48%;
        border: 0.5px solid rgba(0, 0, 0, 0.20);
        background: #FFF;
        padding: 10px;}
      .goldDiv{padding:0 10px}

      .calc-data{flex-direction:column;margin-bottom:10px;gap:8px; }

      
    .right-data{width:100%}
    .calc-data{gap:10px}
    .choose-period .title-data{width:100%}
    .period-data {width:100%;justify-content: flex-end;}
    .choose-period .karatDropDown { width: 100%;}
    .choose-period #calcBtn{width:auto;padding:6px 30px}
}

@media screen and (min-width:1024px) and (max-width:1162px) {
    .economy .currGoldTable .title .name { width: calc((100% - 150px) / 3) }
    .economy .currGoldTable .currGoldDtls .item { width: calc((100% - 150px) / 3) }
}
@media screen and (min-width:320px) and (max-width:638px) {
    .economy .currGoldTable .title .name { width: calc((100% - 150px) / 3) }
    .economy .currGoldTable .currGoldDtls .item { width: calc((100% - 150px) / 3) }
}

@media screen and (max-width:767px) and (orientation:portrait) {
     .economy .currencyDiv .currGoldTable .title .name { font-size: 14px; width: calc((100% - 150px) / 2) }
    .economy .currencyDiv .currGoldTable .title .name:first-child { width: 150px; }
    .economy .currencyDiv .currGoldTable .title .name:nth-child(2) { display: none }
    .economy .currencyDiv .currGoldTable .currGoldDtls .item { font-size: 14px; width: calc((100% - 150px) / 2) }
    .economy .currencyDiv .currGoldTable .currGoldDtls .item:first-child { width: 150px; }
    .economy .currencyDiv .currGoldTable .currGoldDtls .item:nth-child(2) { display: none }
    .economy   .currGoldTable .title .name:nth-child(2) { display: block }
    .economy   .currGoldTable .currGoldDtls .item:nth-child(2) { display: block }
}