:root {
        --topBarH:70px;
        --bottomBarH:70px;
        --black:#333333;
        --darkGray:#B3B3B3;
        --midGray:#E6E6E6;
        --lightGray:#F7F7F7;
        --white:#FFFFFF;
        --screenWidth:360px;
        --screenHeight:640px;
    }
    html,body {
        direction: rtl;
        background: white;

        padding:0;
        margin:0;
        height: calc(var(--screenHeight) + 1px);
        width:calc(var(--screenWidth) + 1px);
    }

    /* texts */
    f1{
        font-family: Alef Hebrew;
        font-weight: bold;
        font-size: 24pt;
        color: #333333;
        letter-spacing: 0;
    }
    f2{
        font-family: Alef Hebrew;
        font-weight: bold;
        font-size: 20pt;
        color: #333333;
        letter-spacing: 0;
    }
    f3{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 18pt;
        color: #333333;
        letter-spacing: 0;
    }
    f4{
        font-family: Alef Hebrew;
        font-weight: bold;
        font-size: 16pt;
        color: #333333;
        letter-spacing: 0;
    }
    f5{
        font-family: Alef Hebrew;
        font-weight: bold;
        font-size: 14pt;
        color: #333333;
        letter-spacing: 0;
    }
    f6{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 14pt;
        color: #333333;
        letter-spacing: 0;
    }
    .f6{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 14pt;
        color: #333333;
        letter-spacing: 0;
    }
    f7{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 14pt;
        color: #b3b3b3;
        letter-spacing: 0;
    }
    f7a{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 14pt;
        color: #fff;
        letter-spacing: 0;
    }
    f7b{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 13pt;
        color: #333333;
        letter-spacing: 0;
    }
    f8{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 12pt;
        color: #b3b3b3;
        letter-spacing: 0;
    }
    f8a{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 12pt;
        color: #333333;
        letter-spacing: 0;
    }
    f9{
        font-family: Alef Hebrew;
        font-weight: bold;
        font-size: 10pt;
        color: #333333;
        letter-spacing: 0;
    }
    f10{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 10pt;
        color: #333333;
        letter-spacing: 0;
    }
    f11{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 10pt;
        color: #b3b3b3;
        letter-spacing: 0;
    }
    f12{
        font-family: Alef Hebrew;
        font-weight: bold;
        font-size: 10pt;
        color: #ffffff;
        letter-spacing: 0;
    }
    f13{
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 10pt;
        color: #ffffff;
        letter-spacing: 0;
    }
    /* TopBar */

    .topBar{
        width:100%;
        height:var(--topBarH);
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        font-family: Alef Hebrew;
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 10;

    }
    .topBar .icon{
        padding: 28px 24px;
        max-width: 30px;
    }
    .topBar .icon > object{
        pointer-events: none;
    }
    .topBar .title{
        padding: 24px;
    }
    .topBar .iconPlus{
        padding: 28px 0px 0 24px;
        display: flex;
    }
    .topBar .iconPlus .iconTxt{
        pointer-events: none;
        padding: 0 5px;
        line-height: 22px;
        display: none;
    }
    .topBar .iconPlus .iconSvg{
        pointer-events: none;
        width:26px;
        height:26px;
    }
    .topBar .iconPlus .iconBtn {
        height: 32px;
        background-color: #333;
        border-radius: 16px;
        padding: 0px 16px;
        line-height: 28px;
        margin-top: -8px;
        width: fit-content;
    }
    .topBar .iconPlus .iconBtnWhite {
        height: 32px;
        background-color: #fff;
        border-radius: 16px;
        padding: 0px 16px;
        line-height: 30px;
        margin-top: -8px;
        margin-right: 22px;
        width: fit-content;
        border: 1px solid #333;
        color: #333;
    }
    /* BottomBar */
    .bottomBar{
        width:100%;
        height:var(--bottomBarH);
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 10;
        box-shadow: 0px 0px 30px 30px rgb(255 255 255);
    }
    .bottomBar > div{
        width: 56px;
        height: 56px;

        border-radius: 38px;
        /* padding: 0; */
        position: relative;
        margin: 5px 6px 0;
    }
    .bottomBar > div > object{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    /* ControllsBar */
    .controlsBarWrapper{
        width:100%;
        height: -moz-calc(var(--screenHeight) - var(--topBarH) - var(--bottomBarH));
        height: -webkit-calc(var(--screenHeight) - var(--topBarH) - var(--bottomBarH));
        height: calc(var(--screenHeight) - var(--topBarH) - var(--bottomBarH));
        background-color: #ffffff;
        overflow-y:scroll;
        position: fixed;
        top: var(--topBarH);
        left: 0px;
    }
    .controlsBarWrapper .controlsBarContentContainer{
        width:100%;
        height: 100%;
        height: -webkit-calc(var(--screenHeight) - var(--topBarH) - var(--bottomBarH));
        height: calc(var(--screenHeight) - var(--topBarH) - var(--bottomBarH));
        background-color: #ffffff;
        overflow-y:scroll;
        padding-bottom: 60px;
    }

    .controlsBarWrapper .controlsBar{
        width:100%;
        height: fit-content;
        border-bottom: 1px solid #f0f0f0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /*overflow: hidden;*/
        background-color: #ffffff;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .14);
        z-index: 1;
        position: relative;
    }
    .controlsBarWrapper .controlsBar .controlsBarContainer{
        padding: 10px 30px;
    }
    .controlsBarWrapper .controlsBarOpenBtn{
        width: calc(100% - 0px);
        height: 30px;
        border-bottom: 1px solid #f0f0f0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #ffffff;
        position: fixed;
        top: var(--topBarH);
        left: 0px;
        visibility: hidden;
        display: flex;
        justify-content: space-between;
        z-index: 10;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .14);
    }
    .controlsBarWrapper .controlsBarOpenBtn > div{
        pointer-events: none;
    }
    .controlsBarWrapper .controlsBarOpenBtn > object{
        pointer-events: none;
    }

    /* FlexContainer */
    .flexContainer{
        display: block;
        text-align: center;
        padding:10px;

    }

    .flexContainer > div{
        width:45%;
        /*height:100px;*/
       /* background-color: #3affff;*/
        margin:5px;
        display: inline-grid;
    }
    .flexContainer > table {
        width: 100%;
        table-layout: fixed;
    }
    .flexContainer > table > tr >td{
        padding:10px;
    }

    .simpleContainer{
        display: block;
        text-align: center;
        padding:10px;

    }

    .bookFrame{
        text-align: right;
        position: relative;
    }
    .bookFrame > img{
        width:100%;
        border-radius: 6px;
    }
    .bookFrame > div{
        width: calc(100% - 32px);
        overflow:hidden;
        display:inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
        height: 24px;
    }
    .bookFrame > object{
        position: absolute;
        bottom: 18px;
        left: 0px;
    }
    .bookFrame .borrow{
        position: absolute;
        bottom: 66px;
        right: 11px;
        background-color: #333333;
        width: fit-content;
        padding: 0 10px;
        border-radius: 10px;
        height: 24px;
        line-height: 24px;
    }
    /* TabsBar */
    .tabsBarWrapper{
        width:100%;
        height: -moz-calc(var(--screenHeight) - var(--topBarH) );
        height: -webkit-calc(var(--screenHeight) - var(--topBarH) );
        height: calc(var(--screenHeight) - var(--topBarH) );
        background-color: #ffffff;
        overflow:hidden;
        position: absolute;
        top: var(--topBarH);
        left: 0px;
    }

    .tabsBarWrapper .tabsBarContentContainer{
        width:100%;
        height: 100%;
        height: -webkit-calc(var(--screenHeight) - var(--topBarH) );
        height: calc(var(--screenHeight) - var(--topBarH) );
        background-color: #ffffff;
        overflow-x:scroll;
        padding-bottom: 60px;
        border-top: solid 1px;
    }

    .tabsBarWrapper .tabsBar{
        width: calc(var(--screenWidth) - 20px);
        margin-right: 10px;
        height:30px;
        /*background-color: #76e7e7;*/
        display: flex;
        justify-content: space-between;
    }

    .tabsBarWrapper .tabsBar .tabBarBtn{
        width: calc(20vw);
        height: 30px;
        line-height: 30px;
        text-align: center;
        /*border: 1px solid black;
        border-radius: 10px;
        margin: 4px 30px 4px 30px;*/
    }

    .tabsBarWrapper .tabsBar .tabBarBtn > div{
        width: 10px;
        height: 10px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 4px;
        background-color: #0d95e8;
    }

    .tabsBarWrapper .tabsBar .tabPointer{
        position: absolute;
        top: 28px;
        left: 30px;
        height: 0px !important;
        margin: 0px !important;
        border: 1px solid black;
        width: 20px;
        z-index: 1;
    }

    .tabsBarWrapper .tabsBarContentContainer .tabsContainer {
        display: flex;
        width: calc(var(--screenWidth) * 3) ;
    }

    .tabsBarWrapper .tabsBarContentContainer .tabsContainer > div{
        width: calc(var(--screenWidth));
        height: calc(var(--screenHeight) - var(--topBarH) );
        overflow-y: scroll;
    }

    /* InfoScreen */
    .infoScreen{
        width: 100%;
        height : 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,0.3);
        z-index: 10000;
        display: none;
    }
    .infoScreen .messageFrame{
        position: fixed;
        top: 50%;
        left: 50%;
        background-color: #ffffff;
        z-index: 10001;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 14px;
        border-radius: 5px;
        border: 1px solid #333;
        width: calc(var(--screenWidth) - 50px);
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .14);

    }
    .infoScreen .messageFrame .messageTxt{
        text-align: right;
        margin-bottom: 20px;
        max-height: calc(var(--screenHeight) - 220px);
        overflow-y: scroll;
    }
    .infoScreen .messageFrame .btnsContainer{
        display: flex;
        justify-content: space-between;
    }



    .preBorrowScreen{
        width: 100%;
        height : 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,0.3);
        z-index: 10000;
        display: none;
    }
    .preBorrowScreen .messageFrame{
        position: fixed;
        bottom: 0px;
        left: 50%;
        background-color: #ffffff;
        z-index: 10001;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 14px;
        border-radius: 5px;
        border: 1px solid #333;
        width: calc(var(--screenWidth) - 50px);
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .14);
    }
    .preBorrowScreen .messageFrame .messageTxt{
        text-align: center;
        margin-bottom: 20px;
        max-height: calc(var(--screenHeight) - 220px);
        overflow-y: scroll;
    }
    .preBorrowScreen .messageFrame .btnsContainer{
        display: flex;
        justify-content: space-between;
        margin: 10px;
    }
    .preBorrowScreen .messageFrame .btnsContainer .icoBtn{
        background-color: #333333;
        border-radius: 5px;
        padding: 0 10px;
        height: 100px;
        width: 112px;
        line-height: 20px;
    }
    .preBorrowScreen .messageFrame .btnsContainer .icoBtn > svg {
        margin-top: 20px;
    }
    .preBorrowScreen .messageFrame :before{
        position: absolute;
        display: block;
        content: '';
        top: 100%;
        right: 50%;
        width: 9px;
        height: 9px;
        margin-top: -4px;
        border-bottom: 1px solid #333;
        border-right: 1px solid #333;
        background: #fff;
        transform: rotate(45deg);
        /*transition: all .4s ease-in-out;*/
    }

    /* ProgressBar */
    .progressBar{
        border-radius: 10px;
        height: 18px;
        width: calc(100vw - 260px);
        background-color: rgba(0, 0, 0, 0);
         left: 0px;
        position: relative;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        pointer-events: auto;
        visibility: visible;
    }
    .progressBar .baseBar{
        border-radius: 10px;
        width: 100%;
        height: 2px;
        background-color: rgb(0, 0, 0);
        bottom: 9px;
        left: 0px;
        position: absolute;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        pointer-events: auto;
    }
    .progressBar .timeBar{
        border-radius: 10px;
        width: 78.8%;
        height: 2px;
        background-color: rgb(219, 217, 217);
        bottom: 9px;
        left: 0px;
        position: absolute;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        pointer-events: auto;
    }
    .progressBar .timeDot{
        width: 16px;
        height: 16px;
        background-color: rgb(0, 0, 0);
        bottom: 10px;
        border-radius: 50%;
        border: 3px solid white;
        left: 78.8%;
        position: absolute;
        transform: translate(-50%, 50%);
        /*z-index: 1;*/
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        pointer-events: auto;
    }

    .progressBar .timeDot > div{
        position:absolute;
        width:30px;
        height:30px;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
    }


    /* SearchField */

    .searchField{
        height: 36px;
        background-color: #f7f7f7;
        width: 150px;
        border-radius: 30px;
    }
    .searchField > i{
        padding: 10px 14px 10px 4px;
        color: grey;
    }

    .searchField .inputField{
        width: 70%;
        background-color: #00000000;
        border-width: 0;
        padding: 0px;
        vertical-align: text-top;
        outline: none;
        font-family: Alef Hebrew;
    }

    .dynamicInputTextArea{
        background-color: #f7f7f7;
        width: 100%;
        border-radius: 18px;
        margin-bottom: 20px;
        position: relative;
        resize: none;
        outline: none;
        min-height: 72px;
        text-align: right;
        font-family: Alef Hebrew;
        font-weight: normal;
        font-size: 10pt;
        color: #333333;
        letter-spacing: 0;
        box-sizing: border-box;
        padding: 9px 18px;
    }

    .inputTextField{
        height: 36px;
        background-color: #f7f7f7;
        width: 100%;
        border-radius: 30px;
        margin-bottom: 20px;
        position: relative;
    }
    .inputTextField > i{
        padding: 10px 14px 10px 4px;
        color: grey;
    }

    .inputTextField .inputField{
        width: calc(100% - 40px);
        background-color: #00000000;
        border-width: 0;
        padding: 0px;
        vertical-align: text-top;
        outline: none;
        font-family: Alef Hebrew;
    }

    .inputTextField .selectionBox{
        /*margin-top: 14px;*/
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        padding: 0 16px;
        display: none;
        position: absolute;
        z-index: 100;
        background-color: white;
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.14);
        width: 70%;
        right: 30px;
        text-align: right;
    }
    .inputTextField .inputError{
        position: absolute;
        display:none;
        bottom: 44px;
        background-color: #E91E63;
        width: 100%;
        border-radius: 5px;
        padding: 9px;
        z-index: 100;
        text-align: right;
        box-sizing: border-box;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .3);
    }

    .inputTextField .inputError :before{
        position: absolute;
        display: block;
        content: '';
        bottom: -4px;
        right: 18px;
        width: 9px;
        height: 9px;
        margin-top: -4px;
        background: #e91e63;
        transform: rotate(45deg);
    }

    /* DropBox */
    .dropBox{
        font-size: 14px;
        width:110px;
        margin-top: 8px;
        position: relative;
    }
    .dropBox .dropBoxBar{
        display: flex;
        justify-content: space-between;
    }
    .dropBox .dropBoxBar .mainSelection{

    }
    .dropBox .dropBoxBar > svg{
        width: 14px;
        padding-top: 6px;
        float: left;
    }
    .dropBox .selectionBox{
        margin-top: 14px;
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        padding: 0 16px;
        display: none;
        position: absolute;
        z-index: 100;
        background-color: white;
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.14);
        width: 96px;
        left: 22px;
    }
    /*.dropBox .selectionBox:before {
        position: absolute;
        display: block;
        content: '';
        bottom: 100%;
        right: 10px;
        width: 7px;
        height: 7px;
        margin-bottom: -4px;
        border-top: 1px solid #b5b5b5;
        border-left: 1px solid #b5b5b5;
        background: #fff;
        transform: rotate(45deg);
        transition: all .4s ease-in-out;
    }*/
    .dropBox .selectionBox > div{
        /*border-bottom: 1px solid #b5b5b5;*/
        padding: 14px 0;
    }
    .dropBox .selectionBox .firstSelection{
        border-bottom: 1px solid #e6e6e6;

    }
    .dropBox .inputError{
        position: absolute;
        display:none;
        bottom: 28px;
        right:  -10px;
        background-color: #E91E63;
        width: 100%;
        border-radius: 5px;
        padding: 9px;
        z-index: 100;
        text-align: right;
        /*box-sizing: border-box;*/
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .3);
    }
    .dropBox .inputError :before{
        position: absolute;
        display: block;
        content: '';
        bottom: -4px;
        right: 18px;
        width: 9px;
        height: 9px;
        margin-top: -4px;
        background: #e91e63;
        transform: rotate(45deg);
    }

    /* TopScreen */
    .topScreen{
        width: calc(var(--screenWidth));
        height : calc(var(--screenHeight));
        position: fixed;
        top: 0px;
        left: -500px;
        background-color: #F7F7F7;
        z-index: 1000;
        display: none;
    }
    .topScreen .topScreenTopBar{
        height: 68px;
        text-align: center;

    }
    .topScreen .topScreenTopBar .title{
        margin-top: 25px;
    }


    .topScreen .topScreenTopBar .backBtn{
        position: absolute;
        top: 32px;
        left: 20px;
        width: 24px;
        height: 24px;
    }

    .topScreen .topScreenTopBar .backBtn > svg{
        margin: 4px;
    }

    .topScreen .topScreenTopBar .rightIco{
        position: absolute;
        top: 32px;
        right: 20px;
        width: 24px;
        height: 24px;
    }

    .topScreen .topScreenTopBar .rightIco >object{
        pointer-events: none;
    }

    .topScreen .topScreenContainer{
        height: calc(var(--screenHeight) - 68px);
        width:calc(var(--screenWidth));
        overflow-y: scroll;
    }
    .selectedBookFrame{
        text-align: center;
    }
    .selectedBookFrame > img{
        width: calc(var(--screenWidth) - 140px);
        border-radius: 10px;
        border: 1px solid #b3b3b3;

    }
    .selectedBookFrame .selectedBookInfo{
        position: relative;
    }
    .selectedBookFrame .selectedBookInfo .bookInfo{
        width: calc(var(--screenWidth) - 180px);
        text-align: center;
        margin: 20px auto;
    }
    .selectedBookFrame .selectedBookInfo .bookInfo > div {
        width: calc(100% - 32px);
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        height: 30px;
    }
    .selectedBookFrame .share{
        /*width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: white;
        border: 1px solid #E6E6E6;*/
        position: absolute;
        top: 2px;
        right: 32px;
       /* box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .1)*/
    }
    .selectedBookFrame .like{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: white;
        border: 1px solid #E6E6E6;
        position: absolute;
        top: 2px;
        left: 32px;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .1)
    }
    .selectedBookFrame .share > svg{
        margin: 15px auto;
    }
    .selectedBookFrame .like > object{
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0 auto;
    }

    .selectedBookFrame .give{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #333333;
        border: 1px solid #E6E6E6;
        position: absolute;
        top: 2px;
        left: 32px;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .3)
    }

    .selectedBookFrame .give > object{
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0 auto;
        width: 32px;
    }

    .selectedBookFrame .holdersList{
        background-color: white;
        width: calc(var(--screenWidth));
        height: fit-content;
        /*height: 200px;*/
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border: 1px solid #E6E6E6;
        min-height: 150px;
    }

    .holdersInfo{
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 4px 20px;
    }

    .holdersInfo .icon{
        margin-top: 12px;
    }
    .holdersInfo .texts{
        text-align: right;
        width: 150px;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .holdersInfo .btn{
        background-color: #333333;
        border-radius: 5px;
        padding: 2px 10px;
        height: 32px;
        margin-top: 5px;
        line-height: 32px;
        display: flex;
    }

    .txtBtnOn{
        background-color: #333333;
        border-radius: 5px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        width: fit-content;
    }
    .txtBtnOff{
        background-color: #fff;
        border: 1px solid #E6E6E6 ;
        border-radius: 5px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        width: fit-content;
    }

    .bigTxtBtnOn{
        text-align: center;
        background-color: #333333;
        border-radius: 5px;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        width: fit-content;
    }

    .bigTxtBtnOff{
        text-align: center;
        background-color: #fff;
        border: 1px solid #E6E6E6;
        border-radius: 5px ;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        width: fit-content;
    }

    .firstTxtBtn{
        border-radius: 0 5px 5px 0;
    }
    .midTxtBtn{
        border-radius: 0 ;
    }
    .lastTxtBtn{
        border-radius: 5px 0 0 5px;
    }

    .bigBtn{
        background-color: #333333;
        border-radius: 5px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        width: calc(var(--screenWidth) - 100px);
        margin-bottom: 20px;
    }
    .smallBtn{
        background-color: #333333;
        border-radius: 5px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        width: fit-content;
       /* margin-bottom: 20px;*/
    }
    .centeredContent{
        text-align: -webkit-center;
        position: fixed;
        top: 0px;
        left: 0px;
        width: calc(var(--screenWidth));
        height: calc(var(--screenHeight));
        overflow: scroll;
    }
    .radioBtns{
        display: flex;
        justify-content: space-between;
        height: 34px;
        line-height: 34px;
       /* width: fit-content;*/
    }
    .radioBtns > div{
       /* margin: 0 4px;*/
    }

    .bigRadioBtns{
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        /* width: fit-content;*/
    }

    .logoHeader {
        width: 100%;
        margin: 40px 0;
        text-align: -webkit-center;
    }

    .logoHeader  > div{
        width: calc(var(--screenWidth) - 100px);
        text-align: center;
        text-align-last: justify;
    }

    .logoHeader  > object{
        width: calc(var(--screenWidth) - 80px);
    }
    .linkText{
        text-decoration: underline;
        margin-bottom: 20px;
    }

    .preloader{
        width: calc(var(--screenWidth));
        height: calc(var(--screenHeight));
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 10000;
        background-color: #000000d0;
        text-align: center;
    }

    .preloader > object{
        transform: translate(0, calc(50vh - 75px)) scale(0.5);
    }

    .iconBtn{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: white;
        border: 1px solid #E6E6E6;
        text-align: center;
        /*position: absolute;
        top: 2px;
        right: 32px;*/
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, .1);
    }
    .iconBtn > object {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .cropController{
        position: absolute;
        top:0px;
        left:0px;
        display:none;
        filter:drop-shadow(0px 0px 2px #fff);
    }
    .cropController > div{
        border-radius:15px;
        width:30px;
        background:#00000055;
        position:absolute;
        height:30px;
        top:20px;
        left:20px;
        border:1px solid black;
        z-index:10;
        color:white;
        text-align: center;
        line-height: 30px;
        filter: drop-shadow(0px 0px 2px white);
    }
    .cropController > hr{
        position:absolute;
        margin:0;
        width:500px;
        border-width:1px;
        border-style:solid;
        border-image:linear-gradient(to right, #ffffff00 0%,#ffffff00 49%,#000000 50%,#000000 100%) 1;
    }
    .faqItm{
        margin-bottom: 10px;
    }
    .faqItm .faQuestion{
        display: flex; justify-content: space-between;
    }
    .faqItm .faQuestion .faqDot{
        width: 8px;
        height: 8px;
        background-color: rgb(0, 0, 0);
        margin-top: 6px;
        margin-left: 8px;
        border-radius: 50%;
    }
    .faqItm .faQuestion >svg{
        width: 14px;
        margin-top: 6px;
        margin-right: 8px;
    }
    .faqItm .faqTxtContainer{
        height: 0px;
        overflow: hidden;
    }
    .faqItm .faqTitle{
        /*padding: 4px 16px 18px 0;*/
        text-align: right;
        width: 100%;
        /*height: 0px;*/
    }
    .faqItm .faqTxtContainer .faqText{
        padding: 4px 16px 18px 0;
        text-align: right;
        /*height: 0px;*/
    }
    .hideNativeScrollbar {
        scrollbar-width: none; /* Firefox 64 */
        -ms-overflow-style: none; /* Internet Explorer 11 */
    }
    .hideNativeScrollbar::-webkit-scrollbar { /** WebKit */
        display: none;
    }

    .tempHide{
        display:none !important;
    }
    .cls-3{
        fill:yellow;
    }