*, :after, :before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
button, input, select, textarea{
    font: inherit;
}

.cl1{width: 10% !important;}
.cl2{width: 20% !important;}
.cl3{width: 30% !important;}
.cl4{width: 40% !important;}
.cl5{width: 50% !important;}
.cl6{width: 60% !important;}
.cl7{width: 70% !important;}
.cl8{width: 80% !important;}
.cl9{width: 90% !important;}
.cl10{display: block; width: 100% !important;}

input[type=text],input[type=number],input[type=email],input[type=datetime-local],input[type=date],input[type=password],input[type=search],input[type=url],input[type=week],input[type=time],input[type=month], textarea{
    display: block;
    width: 100%;
    padding: 5px 15px;
    border: 1px solid #343434;
    text-align: inherit;
    font: inherit;
    outline: none;
}
input[pattern]:valid { /* ?? */
    background-color: #dff7dd;
}
input[disabled], select[disabled]{
    background-color: lightgrey;
}
[disabled] {
    cursor: not-allowed;
}
/*************************************************************** Additional Css ***************************************************************/
/* flex styles*/
.flx{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 15px 0;
}
.flx-R{
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    margin: 15px 0;
}
.flx-C{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 0;
}
.flx-RC{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 15px 0;
}
.flx-FS{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 15px 0;
}
.in-flx{
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    margin: 15px 0;
}
.in-flx-C{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 0;
}
.flx-v{ /*flX*/
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0;
}
.flx-v-S{ /*flX-S*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 15px 0;
}
.flx-v-FS{ /*flX-FS*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 15px 0;
}
.JC-SA{
    justify-content: space-around;
}
.JC-C{
    justify-content: center;
}
.JC-SE{
    justify-content: space-evenly;
}
.JC-SB{
    justify-content: space-between;
}
.FlxG-1{
    flex-grow: 1;
}
.blk{ /*???*/
    display: block !important;
}
.in-blk{ /*???*/
    display: inline-block !important;
}
.dir-Init{
    direction: initial !important;
}
/**** Text styles ****/
.txt-c{
    text-align: center !important;
}
.txt-r{
    text-align: right !important;
}
.txt-l{
    text-align: left !important;
}
.txt-ini{
    text-align: initial !important;
}
.TS-grey{
    text-shadow: 0 0 5px grey !important;
}
.TS-0{
    text-shadow: none !important;
}
.n-wrp{ /*???*/
    white-space: nowrap;
}
.TD-LT{text-decoration: line-through;}

/* default styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
}
table thead th{
    white-space: nowrap;
}
a, label {
    cursor: pointer;
}
.tbl-h{
    overflow-x: auto;
}
table> thead> tr> th,table ._splitter,table> tfoot> tr> th,table> caption{
    padding: 5px;
    border: 1px solid transparent;
    font-size: 0.9em;
    font-weight: bold;
}
table> caption{
    border-radius: 40px 40px 0 0;
}
table._th-h> thead> tr> th,table._th-h> tfoot> tr> th{
    border: 1px solid lightgrey;
}
table._td-h> tbody> tr> td{
    border: 1px solid #2e2e2e;
}
table._tb-f-c> tbody> tr> th:first-of-type, table._tb-f-c> tbody> tr> td:first-of-type{
    text-align: initial;
}
table._n-wrp> tbody> tr> th:first-of-type, table._n-wrp> tbody> tr> td:first-of-type{
    white-space: nowrap;
}
table> tbody> tr> td, table> tbody> tr> th{
    padding: 5px 10px;
}
table._P10-15> tbody> tr> td, table._P10-15> tbody> tr> th{
    padding: 10px 15px;
}

/* table.light1 */
table.light1> thead> tr> th,table.light1 ._splitter,table.light1> tfoot> tr> th,table.light1> caption{
    background-image: linear-gradient(white,#cfcfcf,white);
}
table.light1> tbody> tr{
    background-image: linear-gradient(#ededed,white);
}
table.light1> tbody> tr:hover{
    background-image: linear-gradient(#00000000,#00000014,#00000000);
}
table.light1> tbody> tr> td, table.light1> tbody> tr> th{
    border: 1px solid lightgrey;
}
table.light1V> tbody> tr> td:first-of-type {
    background-image: linear-gradient(white,#cfcfcf,white);
}

/* table.dark1 */

table.dark1> thead> tr> th,table.dark1 ._splitter,table.dark1> tfoot> tr> th,table.dark1> caption{
    background-image: repeating-linear-gradient(45deg, #2a2a2a, transparent 5px);
}
table.dark1> tbody> tr{
    background-color: #000000;
}
table.dark1> tbody> tr:hover{
    background-color: #1c1c1c;
}
table.dark1> tbody> tr> td, table.dark1> tbody> tr> th{
    border: 1px solid #222222;
}
table.dark1.tbl-v> tbody> tr> th:first-of-type {
    background-color: #1a1a1a;
}


table._n-hvr> tbody> tr:hover{
    background-color: #00000000;
}

/* *********** */

table._img35 img{
    height: 35px;
    width: 35px;
    min-width: 35px;
    max-height: 35px;
    object-fit: cover;
    box-shadow: 0 0 5px grey;
    border-radius: 10px;
}
table._img45 img{
    height: 45px;
    width: 40px;
    max-height: 45px;
    min-width: 40px;
    object-fit: cover;
    box-shadow: 0 0 5px grey;
    border-radius: 10px;
}
table._img60 img{
    height: 60px;
    width: 55px;
    max-height: 60px;
    min-width: 55px;
    object-fit: cover;
    box-shadow: 0 0 5px grey;
    border-radius: 10px;
}

label {
    display: block;
    user-select: none;
}

button{
    border: 1px solid grey;
    white-space: nowrap;
    cursor: pointer;
}
button:hover:not(:disabled), a:hover{
    opacity: 0.7;
}
button:active:not(:disabled) {
    opacity: 0.3;
}

a {
    text-decoration: none;
    white-space: nowrap;
}
textarea{
    resize: vertical;
}

input[type=file]{
    display: none;
}

hr {
    margin: 20px 0;
}
select{
    padding: 5px 15px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
select.S1{
    background-image: linear-gradient(lightgrey,white,lightgrey);
    font-weight: bold;
}
select.txt-c-ini{
    text-align: center;
}
select.txt-c-ini:focus option{
    text-align: initial;
}

fieldset.fldSet1{ /*???*/
    margin: 35px 0;
    padding: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
}
fieldset.fldSet1>legend{ /*???*/
    margin: auto;
    margin-bottom: 10px;
    background-color: black;
    color: burlywood;
    padding: 5px 15px;
    border-radius: 7px;
    box-shadow: 0 3px 5px grey;
    font-weight: bold;
}


/*************/
.Vis-H{
    visibility: hidden;
}
.Vis-V{
    visibility: visible;
}
.board{ /*???*/
    padding: 5px 15px;
    border-radius: 15px;
}
/********** borders *************/

.b-no{ /*???*/
    border: none !important;
}
.LB-no{ /*???*/
    border-left: none !important;
}
.RB-no{ /*???*/
    border-right: none !important;
}
.TB-no{ /*???*/
    border-top: none !important;
}
.BB-no{ /*???*/
    border-bottom: none !important;
}
.VB-no{ /*???*/
    border-top: none !important;
    border-bottom: none !important;
}
.HB-no{ /*???*/
    border-right: none !important;
    border-left: none !important;
}
.b-t{ /*???*/
    border: transparent;
}
/**************************/
.VA-T{ /*???*/
    vertical-align: top !important;
}
.VA-M{ /*???*/
    vertical-align: middle !important;
}
.VA-B{ /*???*/
    vertical-align: bottom !important;
}
.VA-Bl{ /*???*/
    vertical-align: baseline !important;
}
.ZI-1{
    z-index: 1;
}
.c-h{
    cursor: help;
}
.conGhost{ /*???*/
    position: absolute;
    overflow: hidden;
    background-color: #000000d4;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 15px 0;
    z-index: 2;
}

.conGhost .conGhstDiv1{ /*???*/
    position: relative;
    display: block;
    border: 4px ridge #000000;
    background-color: #000000;
    margin: 0 auto;
    border-radius: 10px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}
.conGhstDiv1 button.fa-solid { /*???*/
    padding: 3px 7px;
    font-size: 20px;
    color: darkred;
}
.conGhstDiv1 .back{
    border-radius: 10px;
    padding: 0 10px;
}
.conGhstDivHeader{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    box-shadow: 0px 5px 17px #606060;
    background-image: repeating-linear-gradient(45deg, #161616, #000000 6px);
}
.conGhstDivBody{
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    flex-grow: 1;
}

.remove, .imgReset{ /*???*/
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    font-size: 70% !important;
    cursor: pointer;
    border-radius: 40%;
    padding: 3px 5px;
    z-index: 1;
    box-shadow: 1px 1px 5px black, -1px -1px 5px black;
}
.remove:hover, .imgReset:hover{
    opacity: 0.8;
}
.remove:active, .imgReset:active{
    background-color: rgb(139, 0, 0);
    color: rgb(255, 251, 0);
}


.legend{
    position: relative;
}
.legend>span{
    background-image: linear-gradient(lightgrey,white,lightgrey);
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%,-50%);
}


/* Customized Backgrounds styles*/

.primary,.Primary {color: #064097 !important;}
.secondary,.Secondary  {color: #41464b !important;}
.success,.Success{color: #0f5132 !important;}
.success2,.Success2{color: #02af5e !important;}
.danger,.Danger{color: #842029 !important;}
.danger2,.Danger2{color: #ff0015 !important;}
.warning,.Warning{color: #664d03 !important;}
.warning2,.Warning2{color: #b98b00 !important;}
.info,.Info{color: #055160 !important;}
.dark,.Dark{color: #141619 !important;}


.primary {background-color: #cfe2ff !important;}
.secondary  {background-color: #e2e3e5 !important;}
.success{background-color: #d1e7dd !important;}
.success2{background-color: #80f0bd !important;}
.danger{background-color: #f8ced2 !important;}
.danger2{background-color: #ec98a1 !important;}
.warning{background-color: #fdf1c7 !important;}
.warning2{background-color: #cabe91 !important;}
.info{background-color: #cff4fc !important;}
.dark{background-color: #d3d3d4 !important;}

/*********************/
.Primary{background-image: linear-gradient(#cfe2ff,#dfecff,#cfe2ff)!important;}
.Secondary{background-image: linear-gradient(#e2e3e5,#d9e6ff,#e2e3e5)!important;}
.Success{background-image: linear-gradient(#d1e7dd,#e9fff5,#d1e7dd)!important;}
.Success2{background-image: linear-gradient(#80f0bd,#c8ffe6,#80f0bd)!important;}
.Danger{background-image: linear-gradient(#f8ced2,#ffe6e9,#f8ced2)!important;}
.Danger2{background-image: linear-gradient(#ec98a1,#ffd3d8,#ec98a1)!important;}
.Warning{background-image: linear-gradient(#fdf1c7,#fcf6df,#fdf1c7)!important;}
.Warning2{background-image: linear-gradient(#cabe91,#fff6d7,#cabe91)!important;}
.Info{background-image: linear-gradient(#cff4fc,#e1faff,#cff4fc)!important;}
.Dark{background-image: linear-gradient(#d3d3d4,#d4d4ff,#d3d3d4)!important;}

/*********************/
.starsCon{
    display: inline-block;
    margin: 0 10px;
    box-shadow: 0 0 5px black;
    border-radius: 10px;
    overflow: hidden;
    background-color: grey;
    width: 120px;
    height: 20px;
}
.starsCon>img{
    width: 100%;
    height: 100%;
}

.sFlag,.sFlag0,.sFlagY,.sFlagN{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
}
.sFlag::before{
    content: "\2691";
    margin: 0 5px 0 0;
}
.sFlagY::before{
    content: "\2713";
    margin: 0 5px 0 0;
}
.sFlagN::before{
    content: "\2715";
    margin: 0 5px 0 0;
}

.fActive{
    color: #0f5132;
    background-color: #d1e7dd;
    box-shadow: 0 0 5px #0f5132;
}
.fNew{
    color: #064097 !important;
    background-color: #cfe2ff !important;
    box-shadow: 0 0 5px #064097;
}
.fPending, .fCorrection{
    color: #664d03;
    background-color: #fdf1c7;
    box-shadow: 0 0 5px #664d03;
}
.fSuspended{
    color: #ff0015;
    background-color: #ec98a1;
    box-shadow: 0 0 5px #ff0015;
}
.fDeletion{
    color: #842029;
    background-color: #f8ced2;
    box-shadow: 0 0 5px #842029;
}
.fMarket{
    color: #0f5132;
    background-color: #d1e7dd;
    box-shadow: 0 0 5px #0f5132;
}
.fVisible{
    color: #064097 !important;
    background-color: #cfe2ff !important;
    box-shadow: 0 0 5px #064097;
}
.fFreeze{
    color: #41464b !important;
    background-color: #e2e3e5 !important;
    box-shadow: 0 0 5px #41464b;
}
.fHidden{
    color: #141619;
    background-color: #d3d3d4;
    box-shadow: 0 0 5px #141619;
}
.fBlank{
    color: #000000;
    background-color: #ffffff;
    box-shadow: 0 0 5px #000000;
}

/*********************/
/* box-shadows styles */
.bxs-black{
    box-shadow: 0 0 5px black !important;
}
.bxs-in-black{
    box-shadow: 0 0 5px inset black !important;
}
.bxs-grey{
    box-shadow: 0 0 5px grey !important;
}
.bxs-in-grey{
    box-shadow: 0 0 5px inset grey !important;
}
.bxs-in-green{
    box-shadow: 0 0 5px inset green !important;
}
/* Backgrounds colors */
.bg-transparent{
    background-color: transparent !important;
}
.bg-black{
    background-color: black !important;
}
.bg-grey{
    background-color: grey !important;
}
.bg-lightgrey{
    background-color: lightgrey !important;
}

.bg-white{
    background-color: white !important;
}
.bg-red{
    background-color: red !important;
}
.bg-darkred{
    background-color: darkred !important;
}

.bgs-1{
    background-image: linear-gradient(#dddddd,black,#747474) !important;
    color: yellow;
}
.bgi-u{
    background-image: unset !important;
}
/***** borders ******/
.b-1s-grey{
    border: 1px solid grey;
}
/***** colors ******/
.c-black{
    color: black !important;
}
.c-white{
    color: white !important;
}
.c-grey{
    color: grey !important;
}
.c-wheat{
    color: wheat !important;
}
.c-yellow{
    color: yellow !important;
}
.c-orange{
    color: orange !important;
}
.c-blue{
    color: blue !important;
}
.c-green{
    color: green !important;
}
.c-red{
    color: red !important;
}
.c-gold{
    color: gold !important;
}

/***** border colors ******/
.BC-white{
    border-color: white !important;
}

/***** Font Weight ******/
.FW-In{font-weight: inherit !important;}
.FW-I{font-weight: initial !important;}
.FW-B{font-weight: bold !important;}
/***** Font Family ******/
.FF-I{font-family: initial !important;}
.FF-In{font-family: inherit !important;}
.FF-C{font-family: cursive !important;}
.FF-M{font-family: monospace !important;}

/***** Font sizes ******/
.FS-I{font-size: initial;}
.FS-05{font-size: 0.5em !important;}
.FS-06{font-size: 0.6em !important;}
.FS-07{font-size: 0.7em !important;}
.FS-08{font-size: 0.8em !important;}
.FS-09{font-size: 0.9em !important;}
.FS-10{font-size: 1em !important;}
.FS-11{font-size: 1.1em !important;}
.FS-12{font-size: 1.2em !important;}
.FS-13{font-size: 1.3em !important;}
.FS-14{font-size: 1.4em !important;}
.FS-15{font-size: 1.5em !important;}
.FS-16{font-size: 1.6em !important;}
.FS-17{font-size: 1.7em !important;}
.FS-18{font-size: 1.8em !important;}
.FS-19{font-size: 1.9em !important;}
.FS-20{font-size: 2em !important;}
.FS-25{font-size: 2.5em !important;}
.FS-30{font-size: 3em !important;}


.GF-S1{
    color: darkgrey;
    font-size: smaller;
    margin: 3px 0;
}
.GF-S2{
    color: darkgrey;
    font-size: small;
    margin: 3px 0;
}

.img80{
    min-height: 80px;
    height: 80px;
    min-width: 70px;
    width: 70px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 5px grey;
}
.img100{
    min-height: 100px;
    height: 100px;
    min-width: 85px;
    width: 85px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 5px grey;
}

/********** Currencies ************/
.currency-usd::after,.percentage::after,.currency-eur::after,.currency-mad::after,.currency-bitcoin::after,.currency-ethereum::after{
    vertical-align: text-top;
    font-size: x-small;
    margin-left: 5px;
}
.currency-usd::after{content: '$';}
.currency-eur::after{content: '€';}
.currency-mad::after{content: 'MAD';}
.currency-bitcoin::after{content: 'BTC';}
.currency-ethereum::after{content: 'ETH';}

.percentage::after{content: '%';}
.currency-usd-bg,.currency-bitcoin-bg,.currency-ethereum-bg,.currency-usd-bg2,.currency-eur-bg{
    font-weight: bold;
}
.currency-usd-bg{
    background-color: #00640017;
    color: darkgreen;
}
.currency-eur-bg{
    background-color: #0030ffcc;
    color: gold;
}
.currency-eur-bg2{
    background-color: #0001ff4d;
    color: gold;
}
.currency-usd-bg2{
    background-color: #00640017;
    color: rgb(0, 211, 0);
}
.currency-bitcoin-bg{
    background-color: #ffa50017;
    color: orange;
}
.currency-ethereum-bg{
    background-color: #8a2be21c;
    color: blueviolet;
}


/**************** SVG Stars ***************/
.svgRating{
    width: 100px;
}
.svgRating path{
    fill: white;
    stroke: #bdbdbd;
    stroke-width: 5px;
}
.svgRating path.full{
    fill: gold;
}

.svgRating path.svgStars1{fill:url('#svgStars1');}
.svgRating path.svgStars2{fill:url('#svgStars2');}
.svgRating path.svgStars3{fill:url('#svgStars3');}
.svgRating path.svgStars4{fill:url('#svgStars4');}
.svgRating path.svgStars5{fill:url('#svgStars5');}
.svgRating path.svgStars6{fill:url('#svgStars6');}
.svgRating path.svgStars7{fill:url('#svgStars7');}
.svgRating path.svgStars8{fill:url('#svgStars8');}
.svgRating path.svgStars9{fill:url('#svgStars9');}

/************ Flags ***************/
.flag64 {
    display: inline-block;
    background: url(https://assets.tasarot.com/p/img/all.png) no-repeat 0 0;
    background-size: 100% 6425px;
    margin: 0 5px;
    width: 24px;
    height: 17px;
    overflow: hidden;
    vertical-align: top;
}


.Y8xq9f{
    display: none;
    background-color: #000000;
    padding: 5px 10px;
    border-radius: 10px;
    position: absolute;
    width: 95%;
    min-width: 300px;
    margin: auto;
    right: 0;
    left: 0;
    border: 2px outset #000000;
    z-index: 1;
}
.Y8xq9f .head{
    position: relative;
}
.Y8xq9f .head i{
    position: absolute;
    top: 0;
    padding: 8px;
}
.Y8xq9f .head input{
    padding: 5px 35px;
    border-radius: 5px;
    box-shadow: 0 0 5px inset #ffffff;
    background-color: black;
    color: white;
}
.Y8xq9f .body{
    margin-top: 5px;
    background-color: #222222;
    padding: 5px;
    box-shadow: 0 0 5px inset grey;
    max-height: 300px;
    overflow: auto;
}
.Y8xq9f .body>div{
    background-color: #000000;
    border: 1px dashed #444444;
    color: wheat;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 5px 0;
}
.W1Cbye{
    padding: 5px 10px;
    font-weight: bold;
    font-size: 1.2em;
    background: black;
    color: white;
    border: 1px outset grey;
}
.Y8xq9f .body>div:hover{
    background-color: #00000000;
    border: 1px outset #000000;
    cursor: pointer;
}
.Y8xq9f .body input{
    display: none;
}

/***************************/
.show{
display: block !important;
}
.hide{
display: none !important;
}
.Hide{
    display: none;
}
.ov-no{
    overflow: unset !important;
}
.ov-h{
    overflow: hidden !important;
}
.ov-a{
    overflow: auto !important;
}
/* button styles */
button.S1{
    padding: 2px 15px;
    border-radius: 5px;
    box-shadow: 0 0 2px;
    font-family: cursive;
}

button.S2{
    padding: 2px 10px;
    border-radius: 5px;
    box-shadow: 0 0 3px;
}
button.S3{
    padding: 2px 10px;
    border-radius: 5px;
    font-family: cursive;
}

.btn1{ 
    display: block;
    margin: 15px auto;
    padding: 5px 15px;
    border-radius: 10px;
}
.expndBtn{
    opacity: 0.7;
    box-shadow: 3px 3px 5px rgb(60, 43, 43);
}

.opc8:hover{
    opacity: 0.8;
}
.opc5:hover{
    opacity: 0.5;
}
.UUQ890s{
    background-image: linear-gradient(#5a5a5a, #000000);
    text-align: center;
    color: #ffffff;
    padding: 5px;
    border-radius: 30px;
    margin-bottom: 10px;
    border: 2px outset #00000099;
    font-size: 1.3em;
    box-shadow: 0 0 5px wheat;
}



/************************************** Checkboxes *************************************/ /* ??? */
.chkbox {
    height: 0;
    width: 0;
}

/***** Checkboxes Template-1 Style-1 (black => green) *****/


.chkbox.stl1 + .spanbox1::before {
    background-color: white;
}

  .chkbox.stl1 + .spanbox1::after {
    content: " ";
    background-color: black;
    color: white;
  }

/***** Checkboxes Template-1 Style-2 () *****/
.chkbox.stl2 + .spanbox1::before {
    background-color: inherit;
}

  .chkbox.stl2 + .spanbox1::after {
    content: " ";
    background-color: black;
    color: white;
  }

.chkbox.stl2:checked + .spanbox1::before {
    background-color: hsl(238deg 70% 90%);
}


.chkbox.stl2:checked + .spanbox1::after {
    background-color: hsl(235deg 100% 50%);
}
/***** Checkboxes Template-1 Style-3 () *****/


/************* Checkboxes Template-1 (red => green) default *************/

.chkbox + .spanbox1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: text-top;
}

.chkbox + .spanbox1::before {
    content: "";
    width: 2em;
    height: 1em;
    background-color: hsl(0, 80%, 90%);
    border-radius: 1em;
    transition: background-color 200ms ease-in-out;
    box-shadow: 0 0 5px grey;
}

.chkbox + .spanbox1::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: "X";
    font-size: .5em;
    height: .9em;
    left: .2em;
    width: 1.8em;
    height: 1.7em;
    background-color: hsl(0, 80%, 60%);
    color: white;
    border-radius: 1em;
    transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}

.chkbox:checked + .spanbox1::before {
    background-color: hsl(100, 70%, 90%);
}

.chkbox:checked + .spanbox1::after {
    content: "\2713";
    transform: translateX(100%);
    background-color: hsl(100, 70%, 60%);
}

.chkbox:disabled + .spanbox1 {
    color: #777;
    cursor: not-allowed;
}

.chkbox:disabled + .spanbox1::before {
    background-color: #CCC;
}

.chkbox:disabled + .spanbox1::after {
    background-color: #777;
}


/************* Checkboxes Template-2 (white=>green) default *************/
/************* Checkboxes Template-3 (XXX) default *************/
/**/
@keyframes wait {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}
.wait {
    overflow: hidden;
}
.wait::after {
    display: block;
    min-height: 100px;
    content: '';
    position: absolute;
    font-size: 20px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #00000073;
    z-index: 10;
}
.wait::before {
    content: '🎮';
    position: absolute;
    animation-name: wait;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    font-size: 5em;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
}
.conGhstDivBody.wait::before {
    position: unset;
}
.conGhstDivBody.wait::after {
    content: unset;
}
.errIStyle{
    background-image: none !important;
    background-color: #ffdbdb !important;
    box-shadow: 0 0 5px red;
    color: black !important;
}
input[type="radio"].errIStyle,input[type="checkbox"].errIStyle{
    box-shadow: 0 0 5px inset red;
}
.errTStyle{
    color: red;
    text-shadow: 0px 0px 5px red;
    border-radius: 5px;
    margin: 5px 0;
    padding: 2px 10px;
}
.errTStyle::before {
    content: '✗';
    margin: 0 5px;
}
#fltBoxCon{
    width: 50%;
    padding: 20px 40px;
    position: fixed;
    z-index: 100;
    background-color: #470000db;
    right: 0;
    left: 0;
    top: 5%;
    margin: auto;
    box-shadow: 0 0 5px red;
    border-radius: 10px;
    max-height: 90%;
    overflow-y: auto;
}
.fltBox{
    background-image: linear-gradient(#000000, #363636, #000000);
    padding: 2px 10px;
    font-weight: bold;
    border-radius: 5px;
    margin: 5px 0;
    box-shadow: 2px 2px 5px #444444;
}
.fltBox>span{
    background-color: #ff000024;
    padding: 5px 10px;
    border-radius: 10px;
    color: red;
}
.fltBox>span:hover{
    opacity: 0.7;
    cursor: pointer;
    box-shadow: 0 0 5px #000000;
}

/***************** Language layout fixer *****************/
.BR0{
    border-radius: 0 !important;
}
.BR5{
    border-radius: 5px !important;
}
.BR7{
    border-radius: 7px !important;
}
.BR10{
    border-radius: 10px !important;
}
.BR5U{
    border-radius: 5px 5px 0 0 !important;
}
.BR10U{
    border-radius: 10px 10px 0 0 !important;
}
.L-BR10{
    border-radius: 10px 0 0 10px !important;
}
.R-BR10{
    border-radius: 0 10px 10px 0 !important;
}

.Round,.L-Round,.R-Round,.M-Round{
    background-image: linear-gradient(#d9d9d9,white 25% 75%, #d9d9d9);
    padding: 5px 10px;
    border: 1px solid darkgrey;
    white-space: nowrap;
    align-content: center;
}

.Round{
    border-radius: 10px;
}
.L-Round{
    border-radius: 10px 0 0 10px;
}
.R-Round{
    border-radius: 0 10px 10px 0;
}
.L-BBR{ /* Border Box Right */
    white-space: nowrap;
    border-radius: 10px 0 0 10px !important;
}
.R-BBR{ /* Border Box Right */
    white-space: nowrap;
    border-radius: 0 10px 10px 0 !important;
}
.L-P{
    left: 0;
}
.R-P{
    right: 0;
}
.SBBR-Lng{ /* Span Border Box Right */
    padding: 7px 20px;
    border: 1px solid darkgrey;
    border-right: none;
    border-radius: 10px 0 0 10px;
    white-space: nowrap; 
}
.SBBL-Lng{ /* Span Border Box Left */
    padding: 7px 20px;
    border: 1px solid darkgrey;
    border-left: none;
    border-radius: 0 10px 10px 0;
    white-space: nowrap; 
}
/*********************************************************/
.FllH-vh{
    height: 100vh !important;
}
.FllH{
    height: 100% !important;
}
.FllW{
    width: 100% !important;
}
.FllW-H{
    width: 50% !important;
}
.FllW-M30{
    min-width: 30% !important;
}
.T1{ 
    transition: 0.1s;
}
/*** Margin ***/
.MO{ 
    margin-right: auto !important;
    margin-left: auto !important;
}

.M0{ 
    margin: 0 !important;
}

.M5{ 
    margin: 5px !important;
}
.M10{
    margin: 10px !important;
}
.M15{ 
    margin: 15px !important;
}
.M20{ 
    margin: 20px !important;
}
.M25{
    margin: 25px !important;
}
.M0U{ 
    margin-top: 0 !important;
}
.M5U{ 
    margin-top: 5px !important;
}
.M10U{ 
    margin-top: 10px !important;
}
.M15U{ 
    margin-top: 15px !important;
}
.M20U{ 
    margin-top: 20px !important;
}
.M25U{ 
    margin-top: 25px !important;
}
.M5B{ 
    margin-bottom: 5px !important;
}
.M10B{ 
    margin-bottom: 10px !important;
}
.M15B{ 
    margin-bottom: 15px !important;
}
.M20B{ 
    margin-bottom: 20px !important;
}
.M25B{ 
    margin-bottom: 25px !important;
}

.M0H{ 
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.M5H{ 
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.M10H{
    margin-left: 10px !important;
    margin-right: 10px !important;
}
.M15H{
    margin-left: 15px !important;
    margin-right: 15px !important;
}
.M20H{
    margin-left: 20px !important;
    margin-right: 20px !important;
}
.M0V{ 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.M5V{ 
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
.M10V{ 
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.M15V{ 
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
.M20V{ 
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
.M25V{ 
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}
.R-M5{
    margin-right: 5px !important;
}
.R-M10{
    margin-right: 10px !important;
}
.R-M15{
    margin-right: 15px !important;
}
.R-M20{
    margin-right: 20px !important;
}
.L-M5{
    margin-left: 5px !important;
}
.L-M10{
    margin-left: 10px !important;
}
.L-M15{
    margin-left: 15px !important;
}
.L-M20{
    margin-left: 20px !important;
}

/*** Padding ***/
.P0{ 
    padding: 0 !important;
}
.P2{ 
    padding: 2px !important;
}
.P5{ 
    padding: 5px !important;
}
.P10{
    padding: 10px !important;
}
.P15{
    padding: 15px !important;
}
.P20{
    padding: 20px !important;
}
.P25{
    padding: 25px !important;
}
.P5-10{
    padding: 5px 10px !important;
}
.P10-15{
    padding: 10px 15px !important;
}
.P0H{ 
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.P5H{ 
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.P10H{ 
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.P15H{ 
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.P20H{ 
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.P25H{ 
    padding-left: 25px !important;
    padding-right: 25px !important;
}
.P2V{ 
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.P3V{ 
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
.P0V{ 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.P5V{ 
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.P10V{ 
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.P15V{ 
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.P20V{ 
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.P25V{ 
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
.P5U{
    padding-top: 5px !important;
}
.P10U{
    padding-top: 10px !important;
}
.P15U{
    padding-top: 15px !important;
}
.P20U{
    padding-top: 20px !important;
}
.P25U{
    padding-top: 25px !important;
}
.P5B{
    padding-bottom: 5px !important;
}
.P10B{
    padding-bottom: 10px !important;
}
.P15B{
    padding-bottom: 15px !important;
}
.P20B{
    padding-bottom: 20px !important;
}
.P25B{
    padding-bottom: 25px !important;
}
.R-P5{
    padding-right: 5px !important;
}
.R-P10{
    padding-right: 10px !important;
}
.R-P15{
    padding-right: 15px !important;
}
.R-P20{
    padding-right: 20px !important;
}
.L-P5{
    padding-left: 5px !important;
}
.L-P10{
    padding-left: 10px !important;
}
.L-P15{
    padding-left: 15px !important;
}
.L-P20{
    padding-left: 20px !important;
}

.R-BR-0{
    border-right: none !important;
}

.sttc{
    position: static !important;
}
.rltv{
    position: relative !important;
}
.abslt{
    position: absolute !important;
}

.w10p{width: 10% !important;}
.w20p{width: 20% !important;}
.w30p{width: 30% !important;}
.w40p{width: 40% !important;}
.w50p{width: 50% !important;}
.w60p{width: 60% !important;}
.w70p{width: 70% !important;}
.w80p{width: 80% !important;}
.w90p{width: 90% !important;}
.w100p{width: 100% !important;}


.w10x{width: 10px !important;}
.w20x{width: 20px !important;}
.w30x{width: 30px !important;}
.w40x{width: 40px !important;}
.w50x{width: 50px !important;}
.w100x{width: 100px !important;}
.w150x{width: 150px !important;}
.w200x{width: 200px !important;}

/* alerts */
.redAlrt{
    animation: myStl 2s;
}
@keyframes myStl {
    0% {background-color: white;border-color: grey;}
    25% {background-color: #ff8888;border-color: red;}
    50% {background-color: white;border-color: grey;}
    75% {background-color: #ff8888;border-color: red;}
    100% {background-color: white;border-color: grey;}
}
  

@media only screen and (max-width:800px){
    .cl1{width: 20% !important;}
    .cl2{width: 30% !important;}
    .cl3{width: 40% !important;}
    .cl4{width: 49% !important;}
    .cl5{width: 60% !important;}
    .cl6{width: 70% !important;}
    .cl7{width: 80% !important;}
    .cl8{width: 85% !important;}
    .cl9{width: 95% !important;}
    .cl10{display: block; width: 100%;}
    button.linkers>div{max-width: 120px;}
}
@media only screen and (max-width:600px){
    .cl1{width: 30% !important;}
    .cl2{width: 40% !important;}
    .cl3{width: 50% !important;}
    .cl4{width: 60% !important;}
    .cl5{width: 70% !important;}
    .cl6{width: 80% !important;}
    .cl7{width: 90% !important;}
    .cl8{width: 95% !important;}
    .cl9{width: 95% !important;}
    .cl10{display: block; width: 100% !important;}


}
@media only screen and (max-width:500px){
    .cl1{width: 40% !important;}
    .cl2{width: 49% !important;}
    .cl3{width: 60% !important;}
    .cl4{width: 90% !important;}
    .cl5{width: 90% !important;}
    .cl6{width: 90% !important;}
    .cl7{width: 95% !important;}
    .cl8{width: 95% !important;}
    .cl9{width: 95% !important;}
    .cl10{display: block; width: 100% !important;}
}