.contact-num-buttonbody {
}

header {
    background-color: #F59E0B;
    
}

.logo-image-green img {
    height: 70px;
}

.logo-green-text h3 {
    color: rgb(255 255 255 / 100%) !important;
    margin: 15px auto;
}

.myfooter {
    logo-green-text h3 background-color: #333;
    position: absolute;
    bottom: 0px;
}

    .myfooter p {
        margin-bottom: 0px;
        padding: 5px;
        text-align: center;
        color: #8d8d8d;
    }
.logo-text h3 {
    color: #fff;
    font-size:30px;
}
.logo-text h4 {
    font-size: 20px;
    color: #cacaca;
}
.header-text h3 {
    font-size:26px;
    color:#fff;
    font-family:'Script MT'
}



#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

    #progressbar li {
        list-style-type: none;
        color: #000;
        text-transform: uppercase;
        font-size: 12px;
        width: 16%;
        font-weight: 700;
        float: left;
        position: relative;
    }

        #progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 35px;
            line-height: 35px;
            display: block;
            font-size: 12px;
            color: #fff;
            background: #000;
            border-radius: 3px;
            margin: 0 auto 5px auto;
        }
        /*progressbar connectors*/
        #progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: #000;
            position: absolute;
            left: -50%;
            top: 20px;
            z-index: -1; /*put it behind the numbers*/
        }

        #progressbar li:first-child:after {
            /*connector not needed before the first step*/
            content: none;
        }
        /*marking active/completed steps green*/
        /*The number of the step and the connector before it = green*/
        #progressbar li.active:before, #progressbar li.active:after {
            background: #22b35e;
            color: #fff;
        }
.login-form, .otp_div, .reg-form {
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.2);
    margin-top: 20px;
}


footer {
    background-color: #333;
    color: #ddd;
}
.logo img {
    height:80px;
}
.login-form h3, .registration h3 {
    font-size: 24px;
    color: #1E2551;
}


.effect-17 {
    border: 0;
    padding: 4px 0;
    border-bottom: 1px solid #ccc;
    background-color: transparent;
}

    .effect-17 ~ .focus-border {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #1E2551;
        transition: 0.4s;
    }

    .effect-17:focus ~ .focus-border,
    .has-content.effect-17 ~ .focus-border {
        width: 100%;
        transition: 0.4s;
        left: 0;
    }

    .effect-17 ~ label {
        position: absolute;
        left: 15px;
        width: 100%;
        top: 4px;
        color: #1E2551;
        transition: 0.3s;
        z-index: -1;
        letter-spacing: 0.5px;
    }

    .effect-17:focus ~ label, .has-content.effect-17 ~ label {
        top: -16px;
        font-size: 12px;
        color: #1E2551;
        transition: 0.3s;
        left: 0px;
    }
.nav_menu ul {
    list-style:none;
    padding:0px;
    float:right;
}
    .nav_menu ul li {
        display:inline;
        padding:8px 15px;
    }
        .nav_menu ul li a {
            color:#fff;
        }
.nav_menu .dropdown-menu li a {
    color:#000;
}
.nav_menu .dropdown-menu li  {
   display:block;
}
.nav_menu {
    float:right;
    margin-top:15px;
}
:focus {
    outline: none;
}

.myCol {
    position: relative;
}
/* necessary to give position: relative to parent. */
input[type="text"], select, input[type="password"], input[type="number"] {
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}

    select.effect-17.has-content {
        color: #000;
    }

    select.effect-17 {
        font: 15px/24px "Lato", Arial, sans-serif;
        color: #333;
        width: 100%;
        height:33px;
        box-sizing: border-box;
        letter-spacing: 1px;
    }
input[type="date"] {
    width:100%;
}
option {
    color: #000 !important;
}

.btn-success {
    background-color: #12edaa;
    border-color: #12edaa;
    color: #004c2e;
    font-size: 16px;
    text-transform: uppercase;
}

.table th, .table td {
    padding: 0.6rem 0.75rem;
}

.fa-2x {
    font-size: 1.5em;
    margin-top: 0px;
    position: absolute;
    top: 9px;
    right: 12px;
}

.panel-heading h4 {
    color: #fff;
    margin: 0px;
    padding: 5px;
}
.button.button--aylen {
    background: #1b0c6f;
    color: #ffffff;
    overflow: hidden;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.button--border-thin {
    border: 1px solid #107758;
    color: #1f7757;
}
.contact-num-button {
    position:absolute;
    bottom:150px;
    right:20px;
}
.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #ff7777;
    color: #fff;
    padding: 0.2rem 1rem;
    /* text-align: center; */
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}
.modal-footer {
    padding:0px;
}
.foot {
    background-color: #545477;
}
.foot-text h3 {
    color:#b0ea20;
    font-size:20px;
}
.foot-text p {
    color:#fff;
    margin-bottom:0px;
    line-height:20px;
}
    .foot-text p b {
        color: #77d3f1;
    }
footer {
    background-color:#000;
    padding:5px;
}
    footer p {
        margin-bottom:0px;
        color:#fff;
        text-align:center;
    }
.contact-num-button {
    background-color: red;
    color: #fff;
    font-size: 35px;
    height: 60px;
    width: 60px;
    border-radius: 100%;
    text-align: center;
    padding-top: 5px;
    animation: shake 2s linear infinite;
}
@keyframes shake {
    0% {
        transform:rotateZ(0deg);
    }

    25% {
        transform: rotateZ(90deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    75% {
        transform: rotateZ(270deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}
a:hover {
    text-decoration:none;

}
.reg-guide ol li {
    line-height:25px;
    padding:5px;
}
.navbar-nav {
    display: -ms-flexbox;
    display: block;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}
.frame-body {
    background-color: #197FA5;
}
.bg-dark {
    background-color:transparent !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1);
    padding: 5px;
    border-bottom: 2px ridge #f9f9f9;
}
.frame-content {
    background-color:#fff !important;
    min-height:550px;
    padding:30px;
}

/* width */
body::-webkit-scrollbar {
    width: 2px;
}

/* Track */
body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
body::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    body::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
.dashboard-box {
    width: 100%;
    height: 130px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    margin-bottom: 30px;
    padding:25px 15px;
    border-radius:5px;
}
.dashboard-icon {
    width:30%;
    float:left;
    color:#000;
   
}
.dashboard-text {
    width:70%;
    float:left;
    text-align:right;
}
    .dashboard-text h3 {
        text-transform:uppercase;
        letter-spacing:1px;
        line-height:30px;
        font-size:26px;
        color:#fff;
    }
.fa-5x {
    font-size: 3em;
    text-align: center;
    padding-top: 20px;
    color: #1d2551;
}
.one {
    background: linear-gradient(to bottom, #0c6f1d 0%, #0c6f14 100%);
}
.two {
    background: linear-gradient(to bottom, #ff6602 0%, #ff6600 100%);
}
.three {
    background: linear-gradient(to bottom, #545088 0%, #56528c 100%);
}
.four {
    background: linear-gradient(to bottom, #420c27 0%, #401332 100%);
}
.five {
    background: linear-gradient(to bottom, #e40c0b 0%, #e40b0b 100%);
}
.six {
    background: linear-gradient(to bottom, #000000 0%, #000000 100%);
}
.aply-certi h3 {
    color:#1E2551;
    font-size:20px;
    letter-spacing:1px;
}
.declaration {
    border:1px solid #ddd;
    padding:15px;
}
    .declaration p, .declaration li, li, p {
        line-height:30px;
        padding:5px 0px;
    }
.adress1 {
    border:1px solid #ddd;
    padding:15px;
}
    .adress1 p {
        margin-bottom:0px;
    }
.pgw-selected {
    border: 1px solid #7dbc6e;
    background: url('../images/pay-hover.png') bottom right no-repeat;
    text-decoration: none;
    color: #000;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.pgw-selected1 {
    border: 1px solid #7dbc6e;
    background: url('../images/pay-hover.png') bottom right no-repeat;
    text-decoration: none;
    color: #000;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}