/*widths*/
.wd30{ width:30px; }    .wd50{ width:50px; }    .wd80{ width:80px; }
.wd100{ width:100px; }   .wd120{ width: 120px;}   .wd130{ width: 130px;}
.wd140{ width: 140px;}   .wd160{ width: 160px;} .wd180{ width: 180px;}     
.wd240{ width:240px; }  .wd250{ width:250px; }  .wd270{ width:270px; }
.wd290{ width:290px; } .wd300{ width:300px; }
.wd400{ width:400px; }   .wd450{ width:450px; }   
.wd500{ width:500px; }   .wd600{ width:600px; }   .wd750{ width:750px; }
.wdmax{ width: 100%;}   .wdcontent{ width: max-content;}

/*heights*/
.ht20{ height: 20px; }   .ht30{ height: 30px; } .ht50{ height:50px; }   .ht55{ height:55px; }
.ht60{ height:60px; }   .ht80{ height: 80px; }  .ht90{ height: 90px; }
.ht100{ height: 100px; }    .ht120{ height:120px; } .ht150{ height:150px; } 
.ht200{ height: 200px; }   .ht220{ height: 220px; }     .ht250{ height:250px; }   
.ht270{ height: 270px; }   .ht280{ height: 280px; } .ht300{ height:300px; }   .ht350{ height: 350px; }   
.ht400{ height:400px; }     .ht600{ height:600px; }   .htmax{ height:100%; }    .htcontent{ height: max-content;}

/*margins*/
.mgn5{ margin:5px; }
.mgn-top5{ margin-top: 5px;  }  .mgn-top10{ margin-top: 10px;  }  .mgn-top60{ margin-top: 60px;  }
.mgn-topbtm-10{ margin: 10 0 10 0;}
.mgn-btm0{ margin-bottom: 0px;  }   .mgn-btm5{ margin-bottom: 5px;  }   .mgn-btm60{ margin-bottom: 60px;}
.mgn-right10{ margin-right: 10px;  }
.mgn-left5{ margin-left: 5px;  }    .mgn-left10{ margin-left: 10px;  }  .mgn-left15{ margin-left: 15px;  }
.mgn-left--5{ margin-left: -5px;}

/*padding sets*/
.pad3{ padding:3px; }   .pad5{ padding:5px; }   .pad6{ padding:6px; }   .pad10{ padding:10px; } .pad20{ padding:20px; }
.pad40{ padding:40px; }
.pad-lt10{ padding-left: 10px;} .pad-lt15{ padding-left: 15px;} .pad-lt55{ padding-left: 55px;} 
.pad-rt10{ padding-right: 10px;}
.pad-top6{ padding-top:6px;}  .pad-top10{ padding-top:10px;}  .pad-top14{ padding-top:14px;}

/*borders, bgcolors and shadows*/
.bxshdow-8{ box-shadow: rgba(0, 0, 0, 0.54) 0px 5px 8px;}
.bxshdow-20{ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 20px;}

.brdr-gray-1{ border: 1px solid gray;}
.brdr-btm-2{ border-bottom: 2px solid #004482;}
.brdr-rad-10{ border-radius: 10px;}
.brdr-topgray-2dotted{ border-top: 2px dotted gray; }
.brdr-wt-1{ border: 1px solid white;}
.brdr-topwt-2dotted{ border-top: 2px dotted white; }

.wt-opq{ background-color: rgba(255, 255, 255, 1);}
.wt-opq75{ background-color: rgba(255, 255, 255, 0.75);}
.bg-white{ background-color: white; } .bg-blue2{ background-color: #4CBFFF; }
.bg-blue-calm{ background-color: #349AF8;}  .bg-blue-dark{ background-color: #3366cc;}
.bg-blue-primary{ background-color: #0d40fd; }
.bg-inform{ background-color: papayawhip;}

/*positioners, spacers*/
.topcorner{ position:absolute; top:0; right:0; }
/*.spacer-vert55{ height:5px; width:auto;}*/
.zi1{ z-index: 1;}
.linespace3{ height:3px;}   .linespace6{ height:6px;}   .linespace12{ height:12px;}
.linespace20{ height:20px;}
.colspace15{ height:2px;width:15px;}

/*display sets*/
.nodisplay{display: none;}
.oflow-hid{overflow: hidden;}

/*font size, styles and family*/
.txt07{ font-size: .7em;}  .txt09{ font-size: .9em;}    .txt10{ font-size: 1em;}    
.txt11{ font-size: 1.1em;}  .txt12{ font-size: 1.2em;}  .txt14{ font-size: 1.4em;} 
.txt16{ font-size: 1.6em;}
.txt20{ font-size: 2em;}    .txt23{ font-size: 2.3em;}
.txt-fmly-ydbold{ font-family: YD-bold; }
.txtnormal{ font-weight: 100;} .txtbold{ font-weight: bold;} .txtitalic{ font-style: italic;}
.txtnoline{ text-decoration: none; }
.txt-center{ text-align: center;}

.deffont{
    font-family: "YD";
}
.valign-baseline{
    vertical-align: baseline;
}
.vbottom {
    position: absolute;
    bottom: 0;
    left: 0;
}
.txt-white{ color: white; } .txt-blue-dark{ color: #3366cc;} .txt-blue-light{ color: #34ADFF;}
.txt-green{ color: #1d9d0c;}    .txt-red{ color:#d53956;}

/*mouse pointer*/
.cur-hand{ cursor:pointer; }

/*avatar photo / profile*/
.avatar-cropd-51, .avatar-cropd-74{
    width:51px;
    height:51px;
    background-size: 51px 51px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50px;
}
.avatar-cropd-74{
    width:74;
    height:74px;
    background-size: 74px 74px;
    border-radius: 74px;
}
.avatar-pos{
    justify-content: flex-end; margin-right: 10px;
}


/*arrow, direction changers*/
.arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; }
.arr-right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.arr-left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.arr-up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.arr-down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.arrow-rt{
    width:50px;
    height:30px;
    background-image: url('https://static.tport.cloud/b59static2/img/black-dotted-arrow.png');
    background-size: 50px 20px;
    background-repeat: no-repeat;
    background-position: center center;
}