*{box-sizing: border-box;padding:0px;margin:0px;}
body{padding:0px;margin:0px;font-family:Yekan;}
:root{
--topcolor:#3D9AEB;
--darktext:#11589B;
--btnfinder:#032B44;
--btnBRDfinder:#72C8F1;
--btn_amir:rgb(5, 158, 120);
--base:rgb(2, 107, 168);


--head1:rgba(50,130,255,0.2);
--head:rgba(7,60,82,0.6);
--navbar:rgb(2, 107, 168);
--withe:#fff;
--newnav:rgb(242,242,242);
--shadow1:#212788;
--amirMatn:#eee;
--amirMatn2:#333;
--olivergba:rgba(176,203,31,0.2);
--olive:#b0cb1f;
--yellow:rgb(177, 196, 6);
--darkgreen:#096430;
--darkgreen:#096430;
--newgreen1:rgb(106,209,213);
--newgreen:rgb(56,159,163);
--newgreenlight:rgb(112,175,190);
--newblue:rgb(92,154,191);
--newbludark:rgb(152,165,174);
--newolive:rgb(135,159,80);


}
 
/*---------------------------------------------------------------------------------------------------------------------*/
/* The checkBox */
.checkBox {display: inline-block;position: relative;font-size:20px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkBox,.checkBox *{cursor: pointer;}
/* Hide the browser's default radio button */
.checkBox input[type="checkbox"] {display:none;}
  
/* Create a custom radio button */
.checkBox .checkmark{display:inline-block;position: relative;margin:0px 5px;top:4px;height: 20px;width: 20px;background-color: transparent;border-radius: 2px;border:1px solid #aaa;}
  
/* On mouse-over, add a grey background color */
.radioBox:hover input[type="checkbox"] ~ .checkmark {background-color: #3b6bfe;}
  
/* When the radio button is checked, add a blue background */
.checkBox input[type="checkbox"]:checked ~ .checkmark {background-color: #fff;}
  
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkBox .checkmark:after {content: "\2714";position: absolute;font-size:20px;transition-duration: 0.3s;display:none;top: 0px;left: 1.5px;background: none;margin-top: -10px;color:#2c4295 ;}


/* Show the indicator (dot/circle) when checked */
.checkBox input[type="checkbox"]:checked ~ .checkmark:after {display: block;}


.Hform-V1{margin:auto;display:block;overflow:auto;border:1px solid #ddd;}
.Hform-V1 input,.Hform-V1 select,.Hform-V1 textarea{border:1px solid #bbb ;}
.Hform-V1.insMelk #melktype option{font-size: 18px;font-family: Yekan !important;}
.Hform-V1.insMelk .deactive{display:none;}


.INSstage{display:block;margin:auto;position: relative;overflow: auto;}

.INSstage > div>a>b{font-size:36px;color:#ccc;border:2px dotted #aaa;text-align:center;padding-top:16px;width:75px;height:75px;border-radius: 50%;}
.INSstage > div>a{display:inline-block;margin:auto;overflow: auto;cursor: pointer;}
.INSstage > div>a *{cursor: pointer;}
.INSstage > div>a>span{display: block;font-size:15px;}
.INSstage > div>div{border-radius:50%;margin:0px auto;width:12px;height:12px;z-index:10;position: relative;}
.INSstage::before,.INSstage::after{content:"";position: absolute;height:3px;bottom:37px;right:12.5%;}
.INSstage::before{width:75%;background:#ddd;}
.INSstage::after{width:0%;background:#ea364e;}
.INSstage.st2::after{width:25%;}
.INSstage.st3::after{width:50%;}
.INSstage.st4::after{width:75%;}

.INSstage.st1>div:nth-child(1)>a>b,.INSstage.st2>div:nth-child(2)>a>b,.INSstage.st3>div:nth-child(3)>a>b,.INSstage.st4>div:nth-child(4)>a>b{border-color:#ea364e}
.INSstage.st1>div:nth-child(1)>a>b,.INSstage.st2>div:nth-child(2)>a>b,.INSstage.st3>div:nth-child(3)>a>b,.INSstage.st4>div:nth-child(4)>a>b{color:#ea364e}

#melkINSupd #optionVal{display: block;width: 100%;}
#melkINSupd #optionAdd{cursor:pointer;position:absolute;top:0px;left:0px;background:#66cd42;color:#fff;padding:12px 14px;;}
#melkINSupd #optionsLST>div{font-size: 17px;display:inline-block;padding:4px 12px;border:1px solid #ccc;margin:4px;}
#melkINSupd #optionsLST>div>span{padding:0px 5px;color:#ff3333;cursor: pointer;}
#modal_options #optionsBox{max-height:300px;overflow-y:auto;}


#melkINSupd #hashtagsVal{display: block;width: 100%;}
#melkINSupd #hashtagsAdd{cursor:pointer;position:absolute;top:0px;left:0px;background:#66cd42;color:#fff;padding:12px 14px;;}
#melkINSupd #hashtagsLST>div{font-size: 17px;display:inline-block;padding:4px 12px;border:1px solid #ccc;margin:4px;}
#melkINSupd #hashtagsLST>div>span{padding:0px 5px;color:#ff3333;cursor: pointer;}

.panel_melkList > div{border:1px solid #eee;box-shadow:0px 0px 7px -2px #eee}
.panel_melkList > div > div span{font-size:15px}
/* xss 320*/
@media only screen and (max-width : 320px) {
    .INSstage::after , .INSstage::before{display: none;}
    .INSstage > div{width:90%;right:5%;margin:10px auto;}
    .INSstage > div>a{background:#fff;box-shadow:0px 0px 5px #aaa;border-radius: 5px;width:100%;}
    .INSstage > div>a>b{font-size:40px;border:0px;text-align:center;padding-top:0px;padding:10px;width:100%;height:auto;border-radius:0;}
    .INSstage > div>a *{cursor: pointer;}
    .INSstage > div>a>span{display: block;font-size:small;}

    .INSstage.st1>div:nth-child(5)>a,.INSstage.st2>div:nth-child(6)>a,.INSstage.st3>div:nth-child(7)>a,.INSstage.st4>div:nth-child(8)>a{background:#ea364e;color:#fff;}

    #melkINSupd #optionAdd{width:100%;text-align:center;position:relative;top:0px;left:0px;margin-top:10px;}
    #optionsLST>div{display:block;width:100%;}
    #optionsLST>div>span{float:left;position: relative;top:8px;}

    #melkINSupd #hashtagsAdd{width:100%;text-align:center;position:relative;top:0px;left:0px;margin-top:10px;}
    #hashtagsLST>div{display:block;width:100%;}
    #hashtagsLST>div>span{float:left;position: relative;top:8px;}

    
}
/* xs */
@media only screen and (min-width : 321px) and (max-width : 481px) {
    .INSstage::after , .INSstage::before{display: none;}
    .INSstage > div>a>b{font-size:20px;border:0px;text-align:center;padding-top:0px;width:100%;height:auto;border-radius:0;}
    .INSstage > div>a *{cursor: pointer;}
    .INSstage > div>a>span{display: block;font-size:small;}
    .INSstage.st1>div:nth-child(5)>a,.INSstage.st2>div:nth-child(6)>a,.INSstage.st3>div:nth-child(7)>a,.INSstage.st4>div:nth-child(8)>a{background:#ea364e;color:#fff;}


    
    #melkINSupd #optionAdd{width:100%;text-align:center;position:relative;top:0px;left:0px;margin-top:10px;}
    #optionsLST>div{display:block;width:100%;}
    #optionsLST>div>span{float:left;position: relative;top:8px;}

    #melkINSupd #hashtagsAdd{width:100%;text-align:center;position:relative;top:0px;left:0px;margin-top:10px;}
    #hashtagsLST>div{display:block;width:100%;}
    #hashtagsLST>div>span{float:left;position: relative;top:8px;}

}
/* sm */
@media only screen and (min-width : 481px) and (max-width : 623px) {

}
/* xsm */
@media only screen and (min-width : 624px) and (max-width : 767px) {
 


}
/* md */
@media only screen and (min-width : 768px) and (max-width : 879px) {
  


}

/* md to dpwn for menu*/
@media only screen and (max-width : 879px) {


}
/* xmd */
@media only screen and (min-width : 880px) and (max-width : 991px) {
 


}
/* lg */
@media only screen and (min-width : 992px) and (max-width : 1200px) {


}
/* xlg */
@media only screen and (min-width : 1201px) {



}  

/*----------- md TO down --------------*/
@media only screen and (max-width : 879px){



}
/*----------- xsm TO down --------------*/
@media only screen and (max-width : 767px) {

}
/*----------- sm TO down --------------*/
@media only screen and (max-width : 623px) {


}
@media only screen and (max-width : 623px){


}
@media only screen and (max-width : 623px) {

}

@media only screen and (min-width : 481px) and (max-width : 991px) {

}