@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Thin.ttf');
}

/*
BLUE: 10699b
LIGHT BLUE: 3cc5f1
ORANGE: f89823
ORANGE HEX: rgb(248, 152, 35)
*/
:root{
    --orange: #f89823;
    --blue: #10699b;
    --lightblue: #3cc5f1;
}
/*mobile dark blue rgba(12,46,84,0.75)---OLD*/
/*mobile dark blue rgb(38, 78, 145)---OLD*/

.xStyle{
    position:absolute;cursor:pointer; top:5px;right:5px;font-size:20pt;z-index: 10000;
    color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.5);display: inline-block;
}

/* -------------LOGO-----------*/
.logoBar{
    font-family:"Montserrat";
    color:white;
    text-align:center;
    font-size:25pt;
    fontWeight:bold;
    text-shadow:0px 0px 9px rgba(227,145,66,0.89),0px 0px 9px rgba(227,145,66,0.89),0px 0px 9px rgba(227,145,66,0.89);
    background: url('../images/yellogo2.png') no-repeat center top;
};


/* -------------LOGIN NAV-----------*/
.loginNavBackpane{display: none;}
.loginNavHldr{
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    position: fixed;
    z-index: 1000;
    top:0;
    left:0;
    height:100%;
    text-transform: uppercase;
}
.loginNavHldr div{
    font-family:"Montserrat";
    font-weight:bold;
    color:white;
    font-size:14pt;
    cursor:pointer;
    margin:5;
    text-align:center;
    text-shadow: 2px 2px 3px #070302;
}
.loginNavHldr div:hover{
    color: #f89823;
}
.loginNavHldr div i{
    text-shadow: 2px 2px 6px #070302;
    font-size:28pt;
    margin-bottom:5px;
    display:inline-block;
}

.loginNavHldr_homePage{
    width:60%;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    position:static;
    height:auto;
    justify-content:center;
    font-size:20pt;
}
.loginNavHldr_homePage div{
    padding:40px;
    border-radius:20px;
    background-color: rgba(0,0,0,0.6);
    width: 225px;
    margin:50px;
}

.mobileHomeIcon{
    width:150px;
    height:100px;
    color:white;
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin:15px;
}
.mobileHomeIcon i {
    font-size: 40pt;
}
.mobileHomeIcon span {
    display: block;
    text-align: center;
    font-family: "Arial";
    font-size: 12pt;
    font-weight: 600;
    text-shadow: 2px 2px 6px rgb(10 26 68 / 61%);
}

.greeting{
     color:white;font-family:"Montserrat";font-size:12pt;font-weight:bold;margin-bottom:20px;text-align:center;
}
.greeting span{
     display:inline-block;border-radius:8px;border:solid 2px #f89823;padding:0 32px;
}
/* -------------END LOGIN NAV-----------*/
.mainBGGraphic{
    background-image:url('../images/fullScreenBG.jpg');
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
    height:100%;
}

.formWarning{
    font-size:1.2rem;
    display:grid;
    place-items:center;
    font-weight:900;
    width:100%;
    color:black;
    border-radius:30px;
    background:var(--orange);
}
.formTitle{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20pt;
    color:white;
    width: 100%;
    text-shadow:2px 2px 6px rgba(10,26,68,0.61);
}
.formTitleBig, .formTitleIntermediate, .formTitleMedium{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 37.78pt;
    color:white;
    width: 100%;
    text-shadow:2px 2px 6px rgba(10,26,68,0.61);
}
.formTitleBig{margin-top:16px;margin-bottom:16px;}
.formTitleIntermediate {border-radius:60px;background:rgba(0,0,0,0.5);padding-top:10px;}
.formTitleMedium{ font-size:18pt;}
.formTitleSmall{ padding-bottom: 16px;display:flex;justify-content:space-between;text-align:left;color:#f89823;color:white;font-weight:bold;}

.cne-login-type-form{
    width:30%;
    position: relative;
}
.manage-org-form{
    width:50%;
    position: relative;
    margin: auto;
}

.fieldsHolder{
    padding: 16px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.455);
    margin-bottom: 10px;
}
input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px white inset;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.cne-login-type-form input,.cne-form-btn{
    font-family: 'Montserrat', sans-serif;
    font-size: 16pt;
    font-weight: bold;
    padding: 16px;
    border-radius:6px;
    background-color: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(15px);
    box-shadow: 3px 3px 19px 3px rgba(0,0,0,0.13);
    height:50px;
    border:none;
    outline: :none;
    width:100%;
    text-align: center;
    margin-left:0 !important;
    margin-bottom:0 !important;
}
.cne-login-type-form input[type=checkbox]{
    height:25px;
}
.cne-form-btn{
    color: white;
    text-align: center;
    background: linear-gradient(to right, #10699b, #3cc5f1 );
    margin-top:16px;
    /* transform: translateX(5px); */
    line-height: 20px;
    cursor: pointer;
}
.form-sub-btn{
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 12pt;
    font-weight:700;
    color:white;
    text-shadow:2px 2px 6px rgba(10,26,68,0.81);
    margin-bottom: 10px;

}
.cne-login-type-form input:focus{
    border:none;
    outline: :none;
}


/*------------BEGIN REGULAR FORM-------*/
/*------------END REGULAR FORM-------*/

.mgmtMenu{
    width: 100%;
    display: grid;
    place-items:center;
    text-shadow:2px 2px 6px rgba(10,26,68,0.81);
}

.regular-display-pane{
    background-color: rgba(255, 255, 255, 0.555);
    border-radius: 8px
}

/*------------DISPLAY TABLES-------*/
.display-table{
    border-collapse:collapse;
    width: 100%;
    font-size: 11pt;
}
.display-table th{
    color:white;
    /* background-color: rgba(255, 255, 255, 0.3); */
    font-family: "Montserrat";
    font-weight: bold !important;
    text-transform: uppercase;
    border:solid rgba(255, 255, 255, 0.1) 1px;
    padding:7px 10px;
}
.display-table tbody tr {
    /* background: rgba(255,255,255,0.05); */
}
.display-table td{
    color:white;
    padding:2px 10px;
    font-size: 18px;
    font-family:"Montserrat";
}
.display-table td:nth-child(1){
    font-size: 14px;
    font-weight: bold;
    /* font-size: 9pt; */
    color:var(--orange);
    /* font-family: "Arial Black"; */
}

/* -------------RECORD CREDITS MENU-----------*/
.recCredMenuHldr, .recCredMenuHldr-small{
    display:flex;
    justify-content:center;
}
.recCredMenuHldr div, .recCredMenuHldr-small div{
    font-family:"Montserrat";
    font-weight:bold;
    color:white;
    font-size:14pt;
    cursor:pointer;
    margin:6;
    text-align:center;
    text-shadow: 2px 2px 3px #070302;
}
.recCredMenuHldr div:hover,.recCredMenuHldr-small div:hover{
    color: #f89823;
}
.recCredMenuHldr div i,.recCredMenuHldr-small div i{
    text-shadow: 2px 2px 6px #070302;
    margin-bottom:5px;
    text-shadow: 2px 2px 13px rgba(0,0,0,0.5);
    display:inline-block;
}
.recCredMenuHldr div i{ font-size: 98pt;}
.recCredMenuHldr-small div i{ font-size: 28pt;}
.recCredMenuHldr-small div span{ font-size: 12pt;}

/*````````````````````````````````````````````````````
|                                                         |
`````````````````````````````````````````````````````*/

    .upgradeStyle{
        display:inline-block;
        padding-left:16px;
        padding-right:16px;
        border-radius:20px;
        background:var(--orange);
        cursor:pointer;
        margin-left:10px;
        transition: box-shadow .3s;
    }
    .upgradeStyle:hover{
        -webkit-box-shadow: 0px 4px 17px 2px rgba(0,0,0,0.45);
        box-shadow: 0px 4px 17px 2px rgba(0,0,0,0.45);
    }
/*------TOS DIV-----*/
.tos_div{
    /* position:fixed;*/
    bottom:5px;
    left:0px;
    width:100%;
    text-align:center;
    text-shadow:1px 1px 1px rgba(255,255,255,0.15);
    font-family: 'Montserrat', sans-serif;
    font-weight:700;

}
.tos_div span{
    cursor:pointer;
}
.tos_div span:hover{
    color: white;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

/*----END TOS DIV---*/

.recCredMenuHldr2{
    position:relative;
    width:50%;
    display:flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    color:white;
    font-family:"Montserrat";
    font-size:1.5rem;
    opacity:0;padding:16px;border-radius:10px;background:rgba(0,0,0,0.6);
}
.recCredMenuHldr2:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  border-radius:8px;
}
.recCredMenuHldr2 div, .recCredMenuHldr2-small div{
    font-family:"Montserrat";
    font-weight:bold;
    color:white;
    font-size:14pt;
    cursor:pointer;
    margin:6;
    text-shadow: 2px 2px 3px #070302;
}
.recCredMenuHldr2>div:hover,.recCredMenuHldr2-small div:hover{
    color: #f89823;
}
.recCredMenuHldr2 div i,.recCredMenuHldr2-small div i{
    text-shadow: 2px 2px 6px #070302;
    margin-bottom:5px;
    text-shadow: 2px 2px 13px rgba(0,0,0,0.5);
    display:inline-block;
}
.recCredMenuHldr2 div>i{ font-size: 98pt; margin-right: 50px}
.recCredMenuHldr2-small div i{ font-size: 28pt;}
.recCredMenuHldr2-small div span{ font-size: 12pt;}

.recordCredStep{
    display: flex;
    justify-content: flex-start;
    border-radius: 20px;
    padding: 16px 32px;
    transition: background-color .5s;
}
.recordCredStep:hover{
    background-color: rgba(0, 0, 0, 0.35);
}
.recordCredStep:hover .cneBtnWhite{
    background: var(--orange);
}

.bulletNum{
    background: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    /* width:40px !important;
    height:40px; */
    border-radius:20px;
    font-style: italic;
    font-weight: bold;
    color: white;
    text-shadow: -2px -2px 13px rgba(0,0,0,0.25);
    display: inline-block;
    margin-right: 26px;
    padding:5px 15px;
    min-width: 40px;
    /* transform: translateY(50px); */
    /* display: grid;
    place-items:center; */
}

.entryChoice{display:flex;width:100%;flex-direction:row;justify-content: space-between;}
.bulletNum2 {font-size:20pt;background:rgba(255,255,255,0.3);padding:16px;border-radius:38px;transform:translateY(-10px);display:inline-block;font-weight:bold;}
input[type=file]{
    font-weight:bold;font-size:16pt;}
}
input[type=file]::file-selector-button{
    font-size: 12pt;
    background: rgba(0,0,0,0.2);
    border:none;
    outline:none;border-radius:30px;
    padding:0 20px 0 20px;
    height: 53px;
    cursor: pointer;
    display:inline-block;
    font-weight:bold;
    text-shadow:2px 2px 6px rgba(10,26,68,0.61);
    font-family: "Montserrat";
    border:none;
    color:green;
}
input[type=file]::file-selector-button:hover{
    color: var(--blue);
}
/* .cneBtn,.cneBtnWhite{
    font-size: 12pt; background: rgba(0,0,0,0.2);border-radius:30px;padding:0 20px 0 20px;height: 53px;cursor: pointer;display:inline-block;font-weight:bold;
    text-shadow:2px 2px 6px rgba(10,26,68,0.61);font-family: "Montserrat";
}
.cneBtn i,.cneBtnWhite i{
    font-size: 28pt;display:inline-block;transform:translateY(8px);
}
.cneBtn:hover{
    color:var(--orange);
}
.cneBtnWhite:hover{
    color:white;
    background: var(--orange);
} */

/*------ORG DETAIL FORM FORM-----*/
.certHolder {background:#eeeeee;opacity:.9;border-radius:5px;box-shadow:5px 5px 28px 14px rgba(0,0,0,0.2);}
.certHolder .inputField:nth-child(even){background: rgba(235,226,218,.75);}
.certHolder .inputField{
    width:100%;font-size:14pt;height:60px; padding-top:3px;display:flex;justify-content: space-between;position:relative;
}
.certHolder div.listItem:hover{
    cursor: pointer;
}

.certHolder label   { color:#808080;margin-top:15px;font-weight:bold;display:block;padding-left:16px;padding-right:6px;width:auto}
.certHolder input,.certHolder select{width:75%;padding-left:6px;background:none;border:none; border-radius:4px;padding-left:16px;margin-right:16px;height:40px}
.certHolder input:focus,.certHolder select:focus{border:none;outline: none;box-shadow:5px 5px 14px 14px rgba(128,128,128,0.2);transition:box-shadow .6s}

/* Generic Select */
select{width:100%;padding-left:6px;border:none; border-radius:4px;padding-left:16px;margin-right:16px;height:40px}
select:focus{border:none;outline: none;box-shadow:5px 5px 14px 14px rgba(128,128,128,0.2);transition:box-shadow .6s}
option  {color:var(--blue);font-weight: bold;}

.certHolder input[type=checkbox]  {width:30px;height:30px;margin-left: 5px;margin-top: 5px;border-top-left-radius: 5px;border-bottom-right-radius: 5px}
.certHolder option  {color:var(--blue);font-weight: bold;}
/*------END ORG DETAIL FORM FORM-----*/


/*------ENTER CREDITS FORM-----*/
.cne-regular-form{width:100%;color:white;font-family:"Montserrat";font-size:1.2rem;}
 .fieldsHolder2{width:50%;margin:auto}
.fieldsHolder2>div, .dateDiv1{
    width:100%;height:50px;margin-bottom:2px;overflow-y:hidden;display:flex;justify-content: flex-start;
    border:solid 1px rgba(0,0,0,0.1);border-left:none;position:relative;background-color:rgba(0,0,0,0.5);backdrop-filter: blur(15px);``
}
.fieldsHolder2>div::before {
  filter: blur(14px);
  position: absolute;
  width: 100%;
  height: 100%;
}
.dateDiv1{
    overflow-y:visible;display:block;padding-top:10px;
}
.dateDiv1 label{
    margin-top:0 !important; float:none;
}
.fieldsHolder2 div.listItem:hover{
    cursor: pointer;
    border:solid 1px rgba(0,0,0,0.1);border-left:none;background:rgba(0,0,0,0.2);
}

.fieldsHolder2 label   {margin-top:11;font-weight:bold;display:block;padding-left:16px;padding-right:6px;float:left;margin-right:5px;width:auto;white-space:nowrap;}
.fieldsHolder2 input, .fieldsHolder2 select  {width:100%;padding-left:16px;background:none;border:none;color:white;}
.fieldsHolder2 input::placeholder { color: rgba(255,255,255,0.0);font-style: italic;}
.fieldsHolder2 input[type=checkbox]  {width:30px;height:30px;margin-left: 5px;margin-top: 5px;border-top-left-radius: 5px;border-bottom-right-radius: 5px}
.fieldsHolder2 option  {color:var(--blue);font-weight: bold;}
/*------END ENTER CREDITS FORM-----*/

.fieldsHolder3{ width:50%;margin: auto}

.listHolder{width:50%;display: block;margin:auto}
.listHolder>div{
    border:solid 1px rgba(0,0,0,0.1);background:rgba(0,0,0,0.5);
}
.listHolder div.listItem{padding:10px 0 10px 32px;}

.listHolder div.listItem:hover{
    color: var(--orange);
    cursor: pointer;
    border-left:none;background:rgba(0,0,0,0.2);
}
.tabBlock{
    width:50%;display:flex;flex-direction:row;justify-content:space-between;margin:auto;
}

.tabMuted{
    cursor: pointer;
    color: white;
    background-color:rgba(255,255,255,0.3);
    border-top-left-radius:5px;
    border-top-right-radius:20px;
    font-family: "Montserrat";
    font-weight: bold;
}
.tabMuted:hover{
    background-color:rgba(255,255,255,0.3);
}

.kimTabLabel{padding:5px 20px;border-radius:20px;border-top-left-radius:8px;margin-top:0;display:inline-block;height:100%;}
.kimTabActive{
    background-color:rgba(255,255,255,0.3);
    box-shadow: none;
    color: white;
    border-top-left-radius:5px;
    border-top-right-radius:20px;
    font-family: "Montserrat";
    font-weight: bold;
}

.tabMuted {
    -webkit-box-shadow: inset 0 -22px 20px -21px rgba(0,0,0,0.5);
    box-shadow:         inset 0 -22px 20px -21px rgba(0,0,0,0.5);
    background-color: rgba(0, 0, 0, 0.1);
}

.tabContentHldr{
    background : rgba(255,255,255,0.3);font-weight:bold;padding:20px;
    border-radius:5px;
}
.tabContentTitle{
    text-align:center;font-size:14pt;font-weight:bold;padding-bottom:16px;
}
.tabContentBlackener {background: rgba(0,0,0,0.65);padding:20px;border-radius:5px;backdrop-filter: blur(10px);}
input[type=checkbox]{
     width:30px;height:30px;margin-right:5px;
}
.chkbxHldr{width:40px; height:40px;margin-bottom:6px;position:relative;}
.chkbxHldr:hover{
    -webkit-box-shadow: 0px 0px 20px 2px #A58038;
    box-shadow: 0px 0px 20px 2px #A58038;
}
.chkbxHldr label{height:20px;display:inline-block;transform:translateY(-8px);}
.chkbxSpcr{width:100%;display:grid;grid-template-columns: repeat(7, 1fr);}

.chkbxHldr input[type=checkbox]::after{
  content:attr(value);
  display:grid;
  place-items:center;
  color:white;
  font-family: Arial;
  font-weight:600;
  font-size:12.5pt;
  position:absolute;
  top:0;
  left:0;
  width:100%;height:100%;background-color:rgba(78, 211, 255,1);
  transition: background-color .3s;
  cursor: pointer;
}
.chkbxHldr input[type=checkbox]:checked::after{
  background-color:black;
  color:var(--orange);
  -webkit-box-shadow: 0px 0px 20px 2px #A58038;
  box-shadow: 0px 0px 20px 2px #A58038;
}
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
.chkbxHldr2{width:40px; height:40px;margin-bottom:6px;position:relative;}
.chkbxHldr2:hover{
    -webkit-box-shadow: 0px 0px 20px 2px #A58038;
    box-shadow: 0px 0px 20px 2px #A58038;
}
.chkbxSpcr{width:100%;display:grid;grid-template-columns: repeat(7, 1fr);}

.chkbxHldr2,.chkbxHldr2-hltd{
  display:grid;
  place-items:center;
  color:white;
  font-family: Arial;
  font-weight:600;
  font-size:12.5pt;background-color:rgba(78, 211, 255,1);
  transition: background-color .3s;
  cursor: pointer;
}

.stateCard, .stateCar2{
   -webkit-perspective: 0;
   -webkit-backface-visibility: hidden;
   -webkit-transform: translate3d(0,0,0);
   visibility:visible;
   backface-visibility: hidden;
}

.stateCard input[type=checkbox]{
    width:20px;height:20px;margin-left:5px;
    border:none;
}
.chkbxHldr2-hltd{
  background-color:black;
  color:var(--orange);
  -webkit-box-shadow: 0px 0px 20px 2px #A58038;
  box-shadow: 0px 0px 20px 2px #A58038;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

.smallChkbxHldr{
    width:21px; height:21px;margin-bottom:6px;position:relative;
    transform: translateY(10px);
    background:none;
    border: solid white 1px;
    overflow: hidden;
    display:grid;
    place-items:center;
    display: inline-block;
}
.smallChkbxHldr:hover{
    border: solid chocolate 1px;
}

.smallChkbxHldr input[type=checkbox]{
    width:0px;
    height:0px;
}
.smallChkbxHldr input[type=checkbox]::before,
.smallChkbxHldr input[type=checkbox]::after{
  content:"";
  display:grid;
  place-items:center;
  position:absolute;
  top:0;
  left:0;
  width:100%;height:100%;
  background-color:none;
  transition: transform .3s;
  cursor: pointer;
}
.smallChkbxHldr input[type=checkbox]::after{
    background-color:white;
    top:20%;
    left:20%;
    width:60%;height:60%;
    transform: scale(0);
}
.smallChkbxHldr input[type=checkbox]:checked::after{
    transform: scale(1);
}

/*------------SUBTABS-----------*/
.subtab1{
    height: 100%;
    padding: 10px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: inline-block;
    color:#f89823;cursor:pointer;font-weight:bold;
    transition: transform .3s;
}
.subtab1:hover{
    text-decoration: underline;
}
.highlitTab{
    background: rgba(0,0,0,0.4);
}


.promoCodeBtn{
    color:white;
}
.promoCodeBtn:hover{
    color:var(--orange);
}

.credTile{
    display:inline-block;border-radius:8px;padding:8px;margin:15px;background-color:rgba(255,255,255,0.2);
    width:250px;position: relative;overflow: hidden;
}
.credTile:hover{
    -webkit-box-shadow: inset 0px 0px 0px 3px var(--orange);
    box-shadow: inset 0px 0px 0px 3px var(--orange);
}

.planTile, .planTileStill{
    display:inline-block;border-radius:8px;padding:8px;margin:15px;background-color:rgba(255,255,255,0.85);
    width:320px;height:420px;position: relative;overflow: hidden;
  background-size: 100% auto;
  transition: transform .3s;
}
.planTile-green{
  background-image: url('../images/plan-header-green.jpg'), url('../images/plan-footer-green.jpg');
  background-position: left top, left bottom;
  background-repeat: no-repeat, no-repeat;
}
.planTile-yellow{
  background-image: url('../images/plan-header-yelo.jpg'), url('../images/plan-footer-yelo.jpg');
  background-position: left top, left bottom;
  background-repeat: no-repeat, no-repeat;
}
.planTile-blue{
  background-image: url('../images/plan-header-blue.jpg'), url('../images/plan-footer-blue.jpg');
  background-position: left top, left bottom;
  background-repeat: no-repeat, no-repeat;
}
.planTile:hover{
    -webkit-box-shadow: inset 0px 0px 0px 3px var(--orange);
    box-shadow: inset 0px 0px 0px 3px var(--orange);
    transform: scale(1.1);
}
.chooseThisPlan:hover{
    transition: transform .3s;
    cursor: pointer;
    transform: scale(1.1);
}

.addBtn:hover{
    background-color: var(--orange);
}

.fieldsHolder2 div.btnHldr{
    background:none;
    border:none;
    display: flex;
    justify-content: center;
    height:80px;
}
.cne-form-btn2{
    border-radius: 12px;
    background:rgba(0,0,0,.2);
    border:solid white 2px;
    text-shadow: 2px 2px 3px #070302;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
    color: white;
    width:135px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    cursor: pointer;
    display: block;
    font-family:"Montserrat";font-weight:bold;margin-top:16px;font-size:14pt;line-height:40px;
}
.cne-form-btn2:hover,.cne-form-btn2:active{
    color: var(--orange);
    border:solid var(--orange) 2px;
    background: rgba(0,0,0,0.3);
}
.cne-form-btn2:disabled {
  opacity: 0.3;
  cursor: default;
  background:rgba(0,0,0,.2);
  border:solid white 2px;
  color: white;
}
.subNavHldr { display:flex;background:none;border:none;justify-content:space-between;height:60px;width:100%;font-weight:bold;color:white;text-shadow: 2px 2px 6px rgba(10,26,68,0.61);cursor: pointer;}
.subNavHldr span:hover,.subNavHldr:active {color:var(--orange);}
.subNavHldr span i{ font-size: 28pt;display:inline-block;transform:translateY(8px);}
.subNavHldr span { font-size: 12pt; background: rgba(0,0,0,0.3);backdrop-filter: blur(5px);border-radius:30px;padding:0 20px 0 20px;height: 70px}
.subNavHldr span.short {height: 65px;padding-top:6px;}

.lowersubNavHldr{
    display: flex;
}

.subNavHldr2{
    width:0;
}
.cneBtn,.cneBtnWhite,.cneBtnOrange{
    font-size: 12pt; background: rgba(0,0,0,0.6);border-radius:30px;padding:0 20px 0 20px;height: 53px;cursor: pointer;display:inline-block;font-weight:bold;
    text-shadow:2px 2px 6px rgba(10,26,68,0.61);font-family: "Montserrat";
}
.cneBtn i,.cneBtnWhite i,.cneBtnOrange i{
    font-size: 28pt;display:inline-block;transform:translateY(8px);
}
.cneBtnOrange{
    color:white;
    background:var(--orange);
}
.cneBtn:hover{
    color:var(--orange);
    opacity: 1;
}
.cneBtnWhite:hover{
    color:white;
    background: var(--orange);
}
.cneBtnOrange:hover{
    color:white;
    background: rgba(0,0,0,0.3);
}
.certPanel{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color:rgba(255,255,255,0.3);
    color:white;
    width:50%;
    margin:auto;
    margin-bottom: 32px;
    /* box-shadow:5px 5px 28px 14px rgba(0,0,0,0.2); */
    padding:20px;
    text-align:center;
}
.certPanelTitle{
    font-size:20pt;font-family:"Montserrat";font-weight:bold;
}
.certChoose{
    overflow:scroll;
    background-color:#eeeeee;
    opacity:.9;
    font-family:Arial;
    color:black;
    border-radius:5px;
    box-shadow:5px 5px 28px 14px rgba(0,0,0,0.2);
}

.certPanelModal{
    border-radius: 5px;
    background-color:rgba(255,255,255,0.3);
    color:white;
    width:50%;
    /* box-shadow:5px 5px 28px 14px rgba(0,0,0,0.2); */
    padding:20px;
    text-align:center;
}
.acctCertRow{

}
.stopTrackingBtn,.closeModalBtn{
    transition: width .5s;
    width:35px;
    cursor: pointer;
    display:inline-block;
    padding:5px;
    padding-left:7px;
    border:solid white 1px;
    border-radius:25px;
    overflow:hidden;
    white-space:nowrap;
    float:right;
}
.acctCertRow:hover{
    -webkit-box-shadow: inset 0px 3px 0px 0px var(--orange), inset  0px -3px 0px 0px var(--orange),0px 8px 21px -1px rgba(0,0,0,0.71),0px -8px 21px -1px rgba(0,0,0,0.71);
    box-shadow: inset 0px 3px 0px 0px var(--orange), inset  0px -3px 0px 0px var(--orange),0px 8px 21px -1px rgba(0,0,0,0.71),0px -8px 21px -1px rgba(0,0,0,0.71);
}
.acctCertRow:hover .stopTrackingBtn{
    width:145px;
}
.stopTrackingBtn:hover{
    background: rgba(0,0,0,0.2);
    border:solid var(--orange) 1px;
    color: var(--orange);
    width:145px;
}
.closeModalBtn{
    width: 80px;
    transform:translate(10px,-10px);
}
.closeModalBtn:hover{
    background: rgba(0,0,0,0.2);
    border:solid var(--orange) 1px;
    color: var(--orange);
}

/*------TYPEAHEAD-----*/
/* .rbt-input-main form-control rbt-input */
.rbt-input{
    width: 100% !important;
    background: none !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 19.2px;
}
.rbt-input-hint{
    color: var(--orange) !important;
}
/* rbt-menu dropdown-menu show */
.rbt-menu{
    background-color: rgba(0,0,0,0.8)  !important;
}
.rbt-menu .dropdown-item{
    color: var(--orange) !important;
    font-weight: bold !important;
}

.employerForm label{
    white-space:nowrap;
}

.certThumb{
    min-width:181px;
    width:181px;
    max-width:181px;
    height:181px;
    max-height:181px;
    background:rgba(255,255,255,0.2);
    display:grid;
    place-items:center;}

.editCertBtn{padding-top:3;width:95px;height:30px;padding-left:16px; margin-top:5px;
    cursor: pointer; display:inline-block; border:dashed white 1px; border-radius:15px;}
.editCertBtn:hover{  color: var(--orange);border:solid white 1px;  }

@keyframes pulse {
    0%{transform: scale(0.0) translateY(-250px);}
    100%{transform: scale(0.9) translateY(0);}
}
.backNextHldr{display:flex;position:fixed;top:50%;left:0;width:22.5%}
.backNextHldr:nth-child(odd){left:100%;transform: translateX(-100%);}
.backNextHldr>.cneBtnOrange{
    animation: .5s pulse cubic-bezier(0.175, 0.885, 0.370, 1.645) 1;
}
.backNextHldr:nth-child(odd)>.cneBtnOrange{
    position:absolute;right:0;
}

.formUserMsgVisible{
    display: inline-block;
    padding:6px 12px;
    border-radius:40px;
    background-color: var(--orange);
    text-align: center;
    margin:auto;
    transform:scale(1);
    animation: cubic-bezier(0.175, 0.885, 0.320, 1.275) showFormMsg .3s;
}
.formUserMsgHidden {
    transform:scale(0);
    animation: ease-out hideFormMsg .2s;
}

@keyframes showFormMsg {
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}
@keyframes hideFormMsg {
  0% {transform: scale(1);}
  100% {transform: scale(0);}
}

    /*```````````````````````````/
  /      CHECK BOX SPECIAL     /
/...........................*/
/* Hide the Ordinary Checkbox */
.credTile input[type="checkbox"] {
    display: none;
}
/* Checkbox Icons */
.credTile label{
    position: relative;
    padding-left: 30px;
    margin-left: 50px;
    font-size:16pt;
    cursor: pointer;
    color: #fff;
    padding: 16px 28px 0 0;
}

.credTile label:before, .credTile label:after { /*The box*/
    font-family: FontAwesome;
    font-size: 34px;
    /*absolutely positioned*/
    position: absolute; top: 6px; left: -35px; right: 10px;
}
/*       The check:       */
.credTile label:before {
    /*checkbox unchecked */
    content: '';
    width:30px;
    height:30px;
    /* border:solid white 2px; */
    border-radius: 5px;
    top: 14px; left: -40px;
    background-color: rgba(0, 0, 0, 0.2);
    /* content: '\f00c'; */
    -webkit-box-shadow: inset 7px 7px 15px -12px #000000;
    box-shadow: inset 7px 7px 15px -12px #000000;
}
.credTile label:after {
    content: '\f00c'; /*checkbox checked*/
    transform: scale(0);
    overflow: hidden;
    opacity: 0.5;
    font-size: 19px;
   top: 17px;
   left: -34px;
   color: var(--orange);

/**/ -webkit-transition: all 0.50s;
    -moz-transition: all 0.50s;
    -o-transition: all 0.50s;
     transition: transform .25s;
}
/* Animating the Checkbox Icon */
.credTile input[type="checkbox"]:checked + label:after {
    transform: scale(1);
    /* max-width: 25px; */
    opacity: 1;
    margin-right: 90px;
}
    /*```````````````````````````/
  /    END CHECK BOX SPECIAL   /
/...........................*/

.dateVisible{
    opacity: 1;
    transform: translateX(0);
    transform: scale(1);
    /* transition: all 0.4s; */
    background: rgba(255, 255, 255, 0);
    visibility: visible;
    border:none;
}
.dateInvisible{
    background: rgba(255, 255, 255, 0);
    border:none;
    opacity: 0.2;
    transform: translateX(-50px);
    transform: scale(0);
    visibility: hidden;
    /* transition: all 0.4s; */
}
.fullscreenDatePicker{
    display: block;
}
.mobileDatePicker{
    display: none;
}
.dateSelectBox{
    font-size:11pt;padding:0;padding-left:4px;height:28px;
    background:none;margin-right:2px;color:white;width:49px;
    border-radius: 5px;
    -webkit-box-shadow: inset 4px 4px 19px -8px #000000;
    box-shadow: inset 4px 4px 19px -8px #000000;
}
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
    transform: translateX(-50px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
      transform: scale(1);
  }
}

@keyframes slideFadeOut {
    0% {
        opacity: 1;
        transform: translateX(0);
        transform: scale(1);
    }
  100% {
    opacity: 0;
    transform: scale(0);
    transform: translateX(-50px);
  }
}




    /*```````````````````````````/
  /        DATE PICKER         /
/...........................*/
::-webkit-datetime-edit { padding: none; background: none;font-weight: bold;padding-right: 10px;border-radius: 15px;}
::-webkit-datetime-edit-fields-wrapper { background: rgba(0,0,0,0.2);padding-left: 10px;padding-right: 10px;border-radius: 15px;font-weight: bold;}
::-webkit-datetime-edit-text { color: white;}
::-webkit-datetime-edit-month-field { color: white;padding-left: 10px; }
::-webkit-datetime-edit-day-field { color: white; }
::-webkit-datetime-edit-year-field { color: white;padding-right: 10px; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator {
    background-image:url('../images/calendar-icon.png');
    background-size: auto 100%;
    background-position: 0% 0%;
    transform: translateX(-22px);
    cursor: pointer;
}
::-webkit-calendar-picker-indicator:hover {background-position: 100% 0%;}

input[type=date]:focus{
    outline: none;
    border: none;
}
    /*```````````````````````````/
  /       END DATE PICKER      /
/...........................*/



/* -----DATE RANGER-----*/
#dateRanger{
    flex-direction: row;
    justify-content: space-between;
    font-size: 11pt;
    display:flex;justify-content:space-between;padding:0;height:0;overflow:hidden;
}
.pickDate{
    border-radius:30px;backdrop-filter: blur(10px);padding-bottom:5px;background-color:rgba(0,0,0,0.5);min-width:116.36px;
    display:block;position:relative;height:44px;width:220px;padding:10px;padding-left:20px;color:white;white-space:nowrap;
    z-index: 5;
}
.pickDate input[type=date]{
    transform:translateX(0px);background:none;border:none;
}
.pickDate_go{
    font-size: 16pt;
    cursor: pointer;
    width:96px;height:96px;line-height:72px;text-align:center;
}
.pickDate_go:hover{
    background: var(--orange);
}
.mobileDateIndicator{display: none;}
#dateRangerBtn{position:relative;}
#dateRanger{font-size: 11pt;}
.dateRangerX{
    position: absolute;top:0;right:0;transform:scale(0);
}
.dateRangerX:hover{
    border-radius: 30px;
    height: 100%;
    padding-left: 16px;
    background: white;
    color: var(--orange);
}
/* -----END DATE RANGER-----*/

.react-date-picker{}
.react-date-picker__wrapper{border:none !important;}
input.react-date-picker__inputGroup__input {padding-left: 0}


.react-date-picker__inputGroup__input{color:white;background: none;border:none;}
/* the X and the calendar */
.react-date-picker__clear-button__icon, .react-date-picker__button__icon{stroke:white;}
.react-date-picker__button{stroke:white;background: none;border:none;}

/* -----MY BINDER-----*/
.certCard{padding-bottom:30px;border-bottom:solid 1px rgba(255,255,255,0.2);margin-bottom:30px;}
.dateBadge,.creditsBadge{
    position:relative;display:inline-block;line-height:32px;height:30px;border-radius:16px;
    color:white;background: var(--orange);padding-left:16px;padding-right:16px;
    font-size:12pt;
}
.creditsBadge{
    padding-right:50px;
}
.creditHldr{
    width:46px;height:46px;border-radius:24px;border:solid #40ff00 4px;background-color:white;font-family: Arial;
    color: #4aba25; display:grid;place-items:center;font-style:italic;font-weight:600;font-size:18pt;position:absolute;top:-8px;right:0;
}
.certCardDeets{display:flex;width:100%;justify-content:space-between;}
.titleMin{color:var(--orange);font-weight:bold;font-weight: 900;display: inline-block;margin-right: 10px;}
.credTotal{
    color:white;text-align:right;font-family: "Montserrat";background:#e2cab0;font-weight:bold;
    position:fixed;left:25%;bottom:0; width:50%;height:40;box-shadow:0px -4px 18px -1px rgba(0,0,0,0.64);
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

/* -----END MY BINDER-----*/


.titleFlow{
  width:100%;
  height:100%;
  /* background-color: white; */
  box-shadow: inset 0 3px 30px rgba(0, 0, 0, 0.1), inset 0 3px 20px rgba(0, 0, 0, 0.1);
  color:black;
  overflow: hidden;
  position: absolute;
  top:0px;
  left:0px;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.titleFlow .rearLayer{
  color: silver;
  position: absolute;
  top: 250px;
  left: 0px;
  font-size: 100pt;
  height: 400px;
  width:10000px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transition: left 300s;
  opacity: .5;
}
.titleFlow .middleLayer{
  color: silver;
  position: absolute;
  top: 330px;
  left: 0px;
  font-size: 50pt;
  height: 400px;
  width:10000px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transition: left 220s;
  opacity: .8;
}

.titleFlow .frontLayer{
  color: silver;
  position: absolute;
  top: 375px;
  left: 0px;
  font-size: 30pt;
  height: 400px;
  width:10000px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transition: left 150s;
  opacity: 1;
}

.form-btn{
    cursor: pointer;
}
.form-btn:hover{
    color: var(--orange);
}

.mobPickDtBtn{ display: none;}

.recordComponentHldr{
    width:100%;display:block;
}


.spinnerRing1{
    display: inline-block;
    padding:5px 15px;
    border-radius: 40px;
    border:solid var(--orange) 4px;
    -webkit-box-shadow: 0px 0px 22px 0px var(--orange);
    box-shadow: 0px 0px 22px 0px var(--orange);
    background: #423936;
    font-size: 1.5rem;
    font-stretch: expanded;
    font-family: "Arial";
    font-weight: 600;
}
.spinnerRing2{
    animation:spin2 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: inline-block;
    border-radius: 40px;
    -webkit-box-shadow: 3px 5px 22px 0px #4AD0FF;
    box-shadow: 3px 5px 22px 0px #4AD0FF;
}
.spinnerRing3{
    animation:spin3 3s;
    animation-iteration-count: infinite;
    display: inline-block;
}

.perpetualSpinner{
    animation:spin 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}
@keyframes spin2 {
  0% {transform: rotate(0);}
  100% {transform: rotate(-360deg);}
}
@keyframes spin3 {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

    /*``````````````````````````````````````````````````````/
  /                   BEGIN MEDIA QUERIES                 /
/......................................................*/

@media only screen and (min-width: 980px) {


    /*------ENTER CREDITS FORM-----*/
    .shrunken-labels.fieldsHolder2 label   {display:none;}
    .shrunken-labels.fieldsHolder2 label.label2   {display:block;font-size:10pt;position:absolute;top:-13px;left:-11px;color:var(--orange);}
    .shrunken-labels.fieldsHolder2 .shrunken-date-field   {margin-left:16px; font-weight: bold;}
    .shrunken-labels.fieldsHolder2 .input2   {margin-top:9px;font-size: 14.2px; font-weight: bold;}
    .shrunken-labels.fieldsHolder2 .label-small   {font-size: 10pt;margin-top: 11px;padding-left: 6px;padding-right: 6px;background-color:rgba(255,255,255,0.1)}


    /* -------------REMOVE CHROME AUTOFILL STYLES-----------*/
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active{
        -webkit-box-shadow: 0 0 0 30px #523f36 inset !important;
    }/*Change text in autofill textbox*/
    input:-webkit-autofill{
        -webkit-text-fill-color: white !important;
    }
    /* -------------END REMOVE CHROME AUTOFILL STYLES-----------*/

    .mobileNavBurger{display: none;}
    .mobileNavX{display: none;}

    input[type=file]::file-selector-button{
        font-size: 12pt;
        background: rgba(0,0,0,0.2);
        border:none;
        outline:none;border-radius:30px;
        padding:0 20px 0 20px;
        height: 53px;
        cursor: pointer;
        display:inline-block;
        font-weight:bold;
        text-shadow:2px 2px 6px rgba(10,26,68,0.61);
        font-family: "Arial";
        border:none;
        color:white;
    }
    input[type=file]::file-selector-button:hover{
        color: var(--orange);
    }

	/* -----BACK-NEXT HOLDER----- */
    .backNextHldrMobile{display:none;}

	/* -----SCROLLBAR----- */
	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: rgba(255;255,255,0);
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: rgba(130,70,11,0.65);
	  width: 2px;
	  border-radius: 5px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: rgba(0,0,0,0.65);
	}
}
/*-------------------->>>>>>>>>>>>>>><<<<<<<<<<<--------------*/
@media only screen and (max-width: 980px) {
    .main-title-frame {
        font-size: 31pt;
    }
    /*------LOGO-----*/
    .logoBar{
        background: url('../images/name-logo-2.png') no-repeat center top;
    }

    /*------MAIN BG-----*/
    .mainBGGraphic{
        background-image:url('../images/fullScreenBG.jpg');
        background-image:url('../images/mobileBG.jpg');
        background-size:cover;
        background-position:center;
        height:100%;
    }
    /*----END MAIN BG---*/

    /*------LOGIN FORM-----*/
    .cne-login-type-form{
        width:90%;
        padding:3px 24px 16px 16px;
    }
    /*----END LOGIN FORM---*/

    .formWarning{
        font-size:1rem;
        display:grid;
        place-items:center;
        margin:auto;
        padding:10px 8px 8px 8px;
        font-weight:bold;
        width:96%;
        color:black;
        border-radius:30px;
        background:var(--orange);
    }
    /*------FORM TITLES-----*/
    .formTitleBig,.formTitleMedium{
        text-align: center;
        font-family: "Arial";
        font-style: normal;
        font-weight: 600;
        font-size: 20pt;
        color:white;
        width: 100%;
        text-shadow:2px 2px 6px rgba(10,26,68,0.61);
    }

    .formTitleBig{background:rgba(0,0,0,0.5);margin:0}
    .formTitleIntermediate{ font-size:18pt;border-radius:0px;background:none;padding-top:0px;
        font-family: "Arial";}
    .formTitleMedium{ font-size:18pt;padding-top:22px;}
    .formTitle{font-family: "Arial";
    }
    /*----END FORM TITLES---*/

    /*------LOGIN NAV ICONS-----*/

    .loginNavBackpane{
        display: block;
        position: fixed;
        width:100vw;
        height:100vh;
        top:0;
        left:0;
    }

    .loginNavHldr{
        position:fixed;
        width:50%;
        background-color: rgba(38, 78, 145,0.3);
        top:0;
        left:-50%;
        backdrop-filter: blur(15px);
    }
    /*the backdrop blur*/
    .loginNavHldr:before {
      content: '';
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      /* backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px); */
    }

    .loginNavHldr div{
        font-family:"Arial";
         font-weight:normal;
    }
    .loginNavHldr_homePage{
        width:95%;
        display:flex;
        flex-wrap:wrap;
        flex-direction:row;
        position:static;
        height:auto;
        justify-content:center;
        background: none;
    }
    .loginNavHldr_homePage div{
        padding:0px;
        border-radius:20px;
        background-color: rgba(255,255,255,0.0);
        font-size:10pt;
        width: 100px;
        margin:10px;
    }
    .loginNavHldr_homePage div i{
        font-size:42pt;
    }
    /*----END LOGIN NAV ICONS---*/
    /*------GREETING-----*/

    .greeting{
         color:white;font-family:"Arial";font-size:12pt;text-align:center;
    }
    .greeting span{
         display:inline-block;border-radius:8px;border:solid 2px #f89823;padding:0 32px;
    }
    /*----END GREETING---*/
    /*------MGMT MENU-----*/
    .mgmtMenu{
        text-shadow:none;
    }
    /*----END regular-display-pane---*/
    /*------MGMT regular-display-pane-----*/
    .regular-display-pane{
        background-color: rgba(255, 255, 255, 0.0);
        color: white;
        border-radius: 8px;
    }
    th{
        color:var(--orange);
    }
    th,td{
        font-family: "Arial";
        background-color: rgba(255, 255, 255, 0);
        font-size: 10px;
        padding:6px 4px !important;
    }
    td{ color:white;}
    /*----END MGMT MENU---*/

    /*------TOS DIV-----*/
    .tos_div{
        font-family: "Arial", sans-serif;
        font-size: 12px;
    }
    /*----END TOS DIV---*/


    /*------ENTER CREDITS FORM-----*/
    .cne-regular-form{width:100%;font-family: "Arial"}
    .fieldsHolder2,.listHolder{width:100%;}
    .fieldsHolder2 label   {display:none;}
    .fieldsHolder2 label.label2   {display:block;font-size:10pt;position:absolute;top:-13px;left:-11px;color:var(--orange);}
    .fieldsHolder2 .input2   {margin-top:13px;}
    .fieldsHolder2 .label-small   {font-size: 10pt;margin-top: 11px;padding-left: 6px;padding-right: 6px;background-color:rgba(255,255,255,0.1)}
    .fieldsHolder2>div, .dateDiv1{
       border:none;background:rgba(0, 0, 0,0.65);position:relative;
    }
    .dateDiv1{
        overflow-y:visible;display:block;
    }
    .dateDiv1 label{
        color: rgba(255,255,255,0.5);font-style: italic;display: block;font-weight: normal;
    }
    .fieldsHolder2 input::placeholder { color: rgba(255,255,255,0.5);font-style: italic;}
    .recCredMenuHldr-small div i{ font-size: 14pt;display:inline-block;transform:translateY(4px);}
    .recCredMenuHldr-small div span{ font-size: 8pt;}

    /*------END ENTER CREDITS FORM-----*/
    .listHolder>div{
        background:rgba(255,255,255,0.1);
    }
    .listHolder div.listItem{padding-left:16px;font-size: 1rem;font-weight:bold;padding:10px 0 10px 16px}
    .listHolder div.listItem:nth-child(even){background: rgba(33,67,112,0.5);}

    .subNavHldr { height:30px; margin: 16px 0 }
    .subNavHldr span { color:var(--orange);font-size: 11pt; background: rgba(255,255,255,0.0);border-radius:30px; }
    .subNavHldr span.short { height:34px; }
    .subNavHldr span i{ font-size: 14pt;display:inline-block;transform:translateY(4px);}
    .cne-form-btn2{font-family: "Arial";font-size:12pt;height:20px,line-height:26px,border-color:rgba(255,255,255,0.6)}

    .fieldsHolder3{width:100%}
    .lowersubNavHldr{
        margin:auto;
    }
    .lowersubNavHldr span{
        background-color:rgba(0,0,0,0.65);
        height:40px;
    }
    .cneBtn,.cneBtnWhite,input[type=file]::file-selector-button{
        display:inline-block;font-size: 11pt; background: rgba(255,255,255,0.2);border-radius:30px;padding:6px 20px 0 20px;height: 36px;
    }
    .cneBtnOrange{
        display:inline-block;font-size: 11pt; background: rgba(255,255,255,0.1);border-radius:30px;padding:6px 20px 0 20px;height: 36px;
    }
    .cneBtn i,.cneBtnWhite i,.cneBtnOrange i{
        font-size: 14pt;display:inline-block;transform:translateY(3px);
    }
    .disabled{
        display: none;
    }

    .mobPickDtModal{position:relative;}
    .mobPickDtModal:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
    }

    .certPanel{
        /* border-radius:5px; */
        background-color:rgba(255,255,255,0.1);
        color:white;
        width:100%;
        margin:auto;
        /* box-shadow:5px 5px 28px 14px rgba(0,0,0,0.2); */
        padding:0px;
        padding-top:10px
        text-align:center;
        margin-bottom: 20px;
    }
    .certPanelTitle{
        font-family:"Arial";font-weight:bold;
        font-size:11pt;padding-top:10px;
    }
    .certPanelModal{
        border-radius: 10px;
        opacity: 0;
        background-color:rgba(255,255,255,0.3);
        width:95%;
        padding:10px;
    }
    .certChoose{
        /* overflow:scroll;background-color:#eeeeee;opacity:.9;font-family:Arial;color:black;border-radius:5;box-shadow:5px 5px 28px 14px rgba(0,0,0,0.2);padding:20; */
    }
    /*------ORG DETAIL FORM FORM Small Screen-----*/
    .certHolder .inputField{
        font-size:11pt;height:43px; padding-top:0px;
    }
    .certHolder input{height:29px}
    .certHolder .inputField:nth-child(even){background: #dee2e6;}

    /*------END ORG DETAIL FORM FORM-----*/
    /*------TABBLOCK Small Screen-----*/
    .tabBlock{
        width:100%;
    }
    .kimTab{
        background-color:rgba(255,255,255,0.1);
        width:100%;
        height:100%;
        font-size: 8pt;
        text-transform: uppercase;
    }
    .kimTabLabel{padding:5px 4px 10px 4px;font-size: 8.5pt;text-align: center;}

    .kimTabActive{
        border-top-left-radius:7px;
        border-top-right-radius:20px;
        background: rgba(0,0,0,0.65);
        font-family: "Arial";
        height: 47px;
        min-height: 47px;
    }
    .tabMuted{
        background: rgba(255,255,255,0.63);
        font-family: "Arial";
        -webkit-box-shadow: 7px 3px 19px -6px #000000;
        box-shadow: 17px 3px 19px -6px #000000;
        color: black;
        font-size: 8pt;
        height: 47px;
        min-height: 47px;
    }
    /*------END TABBLOCK-----*/

    /*------ -----*/
    .manage-org-form{width:100%}
    .tabContentHldr{
        background : none;font-weight:bold;padding:0px;
    }
    .tabContentTitle{
        text-align:center;font-size:11pt;font-weight:bold;background: rgba(0, 0, 0, 0.65);
        padding:24px;
    }
    .tabContentBlackener{overflow: hidden;padding:0px;background-color:none;border-radius:0px;}
    .tabContentBlackener2{overflow: hidden;padding:0px;background-color:rgba(0, 0, 0,0.5);position:relative;}
    .tabContentBlackener2:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .recordComponentHldr{
        width:100%;display:grid;place-items:center;transform:translateY(-50px);

    }

    input[type=checkbox]{
         width:35px;height:35px;margin-right:5px;
    }
    .chkbxHldr{height:35px;margin:5px;margin-bottom:3px}
    .chkbxHldr label{height:25px;display:inline-block;transform:translateY(-6px);font-size:11pt}
    .chkbxSpcr{width:100%;display:grid;grid-template-columns: repeat(5, 1fr);padding-left: 30px;}
    /*------ END -----*/
    /*------ BEGIN RECORD CREDITS -----*/
    .recCredMenuHldr2{
        width:90%;font-size:1rem;
        padding:8px;
        background:rgba(0, 0, 0,0.5);
        margin: auto;
    }
    .recCredMenuHldr2 div, .recCredMenuHldr2-small div{
        font-size:11pt;
    }
    .recCredMenuHldr2>div:hover{
        color: #f89823;
    }
    .recCredMenuHldr2 div i{
        display:inline-block;
    }
    .recCredMenuHldr2 div>i{ font-size: 38pt; margin-right: 8px}

    .recordCredStep{
        display: flex;
        justify-content: flex-start;
        border-radius: 10px;
        padding: 0px;
        transition: background-color .5s;
    }
    .recordCredStep:hover{
        background-color: rgba(18,37,55, 0.25);
    }
    .recordCredStep:hover .cneBtnWhite{
        background: var(--orange);
    }

    .bulletNum{
        display: none;
    }
    .bulletNum2{
        font-size:12pt;background:rgba(255,255,255,0.3);padding:8px;border-radius:38px;transform:rotate(0deg);display:inline;font-weight:bold;
    }
    input[type=file]{
        font-weight:bold;font-size:11pt;
    }
    input[type=file]::file-selector-button{
        padding-top:0;
        border:none;
        outline:none;
        color:inherit;
    }
    input[type=file]::file-selector-button:hover{
        color: var(--orange);
    }

    .entryChoice{flex-direction:column;}
    /*------ END RECORD CREDITS-----*/



        /*-------SELECT-------*/
        select { font-size: 11pt}
        /*-------END SELECT-------*/

        /*-------DATE PICKER-------*/
    ::-webkit-datetime-edit { font-size: 11pt}
        /*-------END DATE PICKER-------*/

    /*------ MY CERTIFICATIONS-----*/
    .formTitleMedium{ font-size:14pt;font-family: "Arial"}
    .subtab1{
        font-size:11pt;
    }

    .credTotal{background-image:url('../images/mobileBG.jpg');color:white;
        text-align:right;position:fixed;left:0;bottom:0;width:100vw;height:40;
        box-shadow:0px -4px 18px -1px rgba(0,0,0,0.64);font-family: "Arial";
    }
    /*------ END MY CERTIFICATIONS-----*/

    .credTile{
        padding:6px;
        margin: 8px;
        width: 90%;
    }
    .credTile:nth-child(1){
        margin-top: 16px;
    }
    /*---CHECK BOX SPECIAL---*/
/* Checkbox Icons */
.credTile label {
    position: relative;
    padding-left: 30px;
    margin-left: 50px;
    font-size: 12pt;
    cursor: pointer;
    color: #fff;
    padding: 16px 28px 0 0;
}

.credTile label:before, .credTile label:after { /*The box*/
    font-family: FontAwesome;
    font-size: 14px;
    /*absolutely positioned*/
    position: absolute; top: 6px; left: -35px; right: 10px;
}
/*       The check:       */
.credTile label:before {
    /*checkbox unchecked */
    /* content: '\f096'; */
    content: '';
    width:30px;
    height:30px;
    /* border:solid white 2px; */
    border-radius: 5px;
    top: 14px; left: -40px;
    background-color: rgba(0, 0, 0, 0.2);
    /* content: '\f00c'; */
    -webkit-box-shadow: inset 7px 7px 15px -12px #000000;
    box-shadow: inset 7px 7px 15px -12px #000000;
}
.credTile label:after {
    content: '\f00c'; /*checkbox checked*/
    transform: scale(0);
    /* overflow: hidden; */
    opacity: 0.5;
    font-size: 14px;
   top: 19px;
   left: -31px;
   color: var(--orange);

/**/ -webkit-transition: all 0.50s;
    -moz-transition: all 0.50s;
    -o-transition: all 0.50s;
     transition: transform .25s;
}
/* Animating the Checkbox Icon */
.credTile input[type="checkbox"]:checked + label:after {
    transform: scale(1);
    /* max-width: 25px; */
    opacity: 1;
    margin-right: 90px;
}
    /*----END CHECK BOX SPECIAL---*/


    /*----BEGIN PLAN TILE---*/
    .planTile{
        padding:6px;
        margin: 20px;
        width: 80vw;
    }
    /*----END PLAN TILE---*/



.backNextHldr{
    display: none;
}
.backNextHldrMobile{
    line-height: 1;display:inline-block;position:fixed;top:50%;
}
.backNextHldrMobile>.cneBtnOrange{
    background-color: var(--orange);
    padding: 6px 3px 9px 3px;
    text-align: center;
    height:inherit;
    transform: scale(0.9);
    -webkit-box-shadow: 11px 6px 9px 0px rgba(0,0,0,0.42);
    box-shadow:         11px 6px 9px 0px rgba(0,0,0,0.42);
    animation: .5s pulse cubic-bezier(0.175, 0.885, 0.370, 1.645) 1;
}
.backNextHldrMobile>.cneBtnOrange:last-child{
    -webkit-box-shadow: -11px 6px 9px 0px rgba(0,0,0,0.42);
    box-shadow:         -11px 6px 9px 0px rgba(0,0,0,0.42);
}

    .backNextHldrMobile>.cneBtnOrange>i{
        /* transform: rotate(-90deg); */
    }
    /* -----DATE RANGER-----*/
    #dateRanger{font-size: 11pt;display:flex;justify-content:space-between;height:0,overflow:hidden;}
    .pickDate{
        border-radius:30px;backdrop-filter: blur(10px);padding-bottom:5px;background-color:rgba(38, 78, 145,0.75);position:relative;
    }
    .pickDate input[type=date]{
    }
    .mobileDateIndicator{display: inline-block;margin-left: 10px;color:red;}

    .dateRangerX{
        position: absolute;top:7px;right:0;transform:scale(0);
    }
    .dateRangerX:hover{
        border-radius: 30px;
        height: 100%;
        padding-left: 16px;
        background: none;
        color: white;
    }
    /* -----END DATE RANGER-----*/
    /*...........DATE PICKER.........
        ::-webkit-datetime-edit {padding: none; background: none;font-weight: bold;padding-right: 10px;border-radius: 15px;}
        ::-webkit-datetime-edit-fields-wrapper {background: rgba(255,255,255,0.25);padding-left: 10px;padding-right: 10px;border-radius: 15px;font-weight: bold;}
        ::-webkit-datetime-edit-text {color: white;}
        ::-webkit-datetime-edit-month-field {color: white;padding-left: 10px; }
        ::-webkit-datetime-edit-day-field {color: white; }
        ::-webkit-datetime-edit-year-field {color: white;padding-right: 10px; }
        ::-webkit-inner-spin-button { display: none; }
        */
        ::-webkit-calendar-picker-indicator {
            background-image:url('../images/calendar-icon.png');
            background-size: auto 100%;
            background-position: 0% 0%;
            transform: translateX(-22px);
            cursor: pointer;
        }
        ::-webkit-calendar-picker-indicator:hover {background-position: 100% 0%;}

        input[type=date]{
            color:white;
        }

        input[type=date]:focus{
            outline: none;
            border: none;
        }
        .dateVisible{
            /* transform:translateY(7px); */
        }
        .react-calendar{
            border-radius:8px !important;
            z-index: 100000 !important;
            top: 0;
        }
        .dateInvisible{
            transform:translateY(7px);
        }

        .fullscreenDatePicker{
            display: none;
        }
        .mobileDatePicker{
            display: block;
        }
    /*`````END DATE PICKER`````*/


    /*----------FONT CORRECTION---------*/
    .cne-login-type-form input,.cne-form-btn{
        font-family: "Arial";
    }
    .form-sub-btn{
        font-family: 'Arial', sans-serif;
    }
    .display-table tbody tr {
        background: none;
    }
    .display-table,.display-table tr{
        background: none;
    }
    .display-table th{
        font-family: "Arial";
    }
    .display-table td{
        font-family: "Arial";
        color:white;
        font-size: 11pt;
        background: none;
        border:none;
    }
    .display-table td:nth-child(1){
        font-weight: bold;
        font-size: 9pt;
        color:var(--orange);
        font-family: "Arial";
    }
    .recCredMenuHldr div, .recCredMenuHldr-small div{
        font-family:"Arial";
    }
    .recCredMenuHldr2{
        font-family:"Arial";
    }
    .recCredMenuHldr2 div, .recCredMenuHldr2-small div{
        font-family:"Arial";
    }
    .cneBtn,.cneBtnWhite,.cneBtnOrange{
        font-family:"Arial";
    }


    /* -----MY BINDER-----*/
    .certCard{
        color:black;color:white;padding:0px 9px 20px 9px;margin-bottom: 21px;
        /* background-image: url('../images/left-skew-shadow.png');
        background-image: url('../images/beige-shadow.png'); */
        background-position: bottom;
        background-size: 108% auto;
        background-repeat: no-repeat;
        font-size: 1rem;
    }
    .certCard:nth-child(1){
        padding-top:20px;
    }
    /* .certCard:nth-child(odd){
        background-image: url('../images/right-skew-shadow.png');
    } */
    .dateBadge,.creditsBadge{
        position:relative;display:inline-block;line-height:32px;height:30px;border-radius:16px;
        color:white;background: rgba(255,255,255,0.2)/*linear-gradient(to right,#2c3b5b, #35a7b1)*/;padding-left:16px;padding-right:16px;
        font-size:12pt;
    }
    .creditsBadge{
        padding-right:50px;
    }
    .creditHldr{
        width:46px;height:46px;border-radius:24px;border:solid #40ff00 3px;background-color:white;
        color:#4aba25; display:grid;place-items:center;font-style:italic;font-weight:bold;font-size:18pt;position:absolute;top:-8px;right:0;
    }
    .certCardDeets{display:flex;width:100%;justify-content:space-between;}
    .titleMin{color:#8ab5ff;font-weight:bold;}
    /* -----END MY BINDER-----*/

    .formTitleSmall{ font-size: 11pt;padding: 24px;}

    .form-btn{
        font-size: 11pt;
    }

    .acctCertRow:hover .stopTrackingBtn{
        width:35px;
    }
    .certThumb{display:none;min-width:54px;height:54px;background:rgba(0,0,0,0.2);}

    /* .editCertBtn{
        border:dashed black 1px;
        position:absolute;
        top:13px;
        right:25px;
        width:30px;
        padding-left: 6px;
        overflow: hidden;
        display: inline-block;
        color:white;background: linear-gradient(to right,#2c3b5b, #35a7b1);
    } */
    .editCertBtn:hover{  color: var(--orange);border:solid black 1px;  }

    .mobPickDtBtn{ display: block;}
    /*```````````````````````````/
  /      END MEDIA QUERIES     /
/...........................*/
}




    /*````````````````````````````````````````/
  /   ----- BEGIN GENERICMODAL STYLES ----  /
/........................................*/
.modal{
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(25px);
    display:grid !important;
    place-items:center !important;
}

#genericModal,.modal-dialog{
    width:70% !important;
    max-width:70% !important;
}

#genericModal{
    display:grid;
    place-items:center;
}

.modal-header{
    border-bottom: solid rgba(255,255,255,0.2) 1px;
}
.modal-footer{
    border-top: solid rgba(255,255,255,0.2) 1px;
}

.modal-content{
    color: white;
    background:rgba(0,0,0,0.2);
    color:white;
    border:solid rgba(255,255,255,0.2) 1px;
    border-radius:8px;
}
.blogInsert{
    background:none !important;
}

.btn-secondary{
    background: rgba(0,0,0,0.2);
    border:solid rgba(255,255,255,0.2) 1px;
    border-radius:30px;
    padding:0 20px 0 20px;
    height: 40px;
    text-shadow:2px 2px 6px rgba(10,26,68,0.61);
}

/*-------------------->>>>>>>>>>>>>>> MOBILE <<<<<<<<<<<--------------*/
@media only screen and (max-width: 980px) {

    .modal{
        background: none;
        width:100% !important;
    }
    #genericModal,.modal-dialog{
        width:94% !important;
        max-width:94% !important;
        background-color: rgba(0,0,0,0.75) !important;
    }
    .modal-content{
        width:100% !important;
    }
    .modal-body,#contentViewer{
        padding:0px !important;
        font-size: 0.5rem !important;
    }
    .modal-body p{
        font-size: 0.95rem !important;
    }
}
    /*```````````````````````````````````` ``/
  /   ----- END GENERICMODAL STYLES ----   /
/.......................................*/