@import url('https://fonts.googleapis.com/css?family=Lato|Oswald|PT+Sans|Roboto|Roboto+Condensed');

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: 'PT Sans', sans-serif;
}

.body-content {
    margin-top: 60px;
    padding-bottom: 50px;
}
/*===================================================================================================================================
    General
===================================================================================================================================*/
body.overflow-hidden.is-fixed {
    overflow: hidden;
    -moz-overflow: hidden;
}

body.overflow-hidden {
    overflow: hidden;
    -moz-overflow: hidden;
}

@media all and (min-width: 768px) {
    body.overflow-hidden {
        overflow: hidden;
        -moz-overflow: hidden;
    }
}

ol, ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

a {
    text-decoration: none;
    cursor: pointer;
}

    a:active,
    a:hover,
    a:focus {
        text-decoration: none;
    }

input,
select,
textarea {
    width: 100%;
    max-width: 100%;
}

.no-pd {
    padding: 0 !important;
}

.no-mg {
    margin: 0 !important;
}

.no-pd-mg {
    padding: 0 !important;
    margin: 0 !important;
}

.required {
    -webkit-box-shadow: 0px 0px 2px 0px #c22 !important;
    -moz-box-shadow: 0px 0px 2px 0px #c22 !important;
    box-shadow: 0px 0px 2px 0px #c22 !important;
}

.required_tb {
    -webkit-box-shadow: 0px 0px 2px 0px #c22 !important;
    -moz-box-shadow: 0px 0px 2px 0px #c22 !important;
    box-shadow: 0px 0px 2px 0px #c22 !important;
    background: #fbd646;
}

.valid-summary {
    color: #d33;
    font-weight: 600;
}

    .valid-summary li {
        margin-bottom: 10px;
    }

div[class*="col-"] {
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.blocktrigger {
    pointer-events: none;
    opacity: 0.5;
}

.blocktb {
    pointer-events: none !important;
    background: rgba(0, 0, 0, .075) !important;
}

.hasothers {
    margin-bottom: 5px;
}

.addalert {
    position: relative;
    font-size: 11px;
    color: #ff0000;
    font-weight: 600;
}

.margin_bottom {
    margin-bottom: 5px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}
/*========================================================================
colors
==========================================================================*/
.blue {
    color: rgb(39,176,217) !important;
}

.gray {
    color: rgba(0, 0, 0, .3) !important;
}

.darkgray {
    color: rgba(0, 0, 0, .4) !important;
}

.red {
    color: #d33 !important;
}

.green {
    color: #00a01c !important;
}

.black {
    color: #333 !important;
}

.orange {
    color: #ff6a00 !important;
}

.white {
    color: #fff;
}

.blue-bg {
    background: #48C2D6 !important;
}

.gray-bg {
    background: rgba(0, 0, 0, .3) !important;
}

.darkgray-bg {
    background: rgba(0, 0, 0, .4) !important;
}

.red-bg {
    background: #d33 !important;
}

.green-bg {
    background: #02c700 !important;
}

.black-bg {
    background: #333 !important;
}

.orange-bg {
    background: #ff6a00 !important;
}

.white-bg {
    background: #fff !important;
}

.blue-bb {
    border-color: #48C2D6 !important;
}

.gray-bb {
    border-color: rgba(0, 0, 0, .3) !important;
}

.darkgray-bb {
    border-color: rgba(0, 0, 0, .4) !important;
}

.red-bb {
    border-color: #d33 !important;
}

.green-bb {
    border-color: #02c700 !important;
}

.black-bb {
    border-color: #333 !important;
}

.orange-bb {
    border-color: #ff6a00 !important;
}

.top-radius6 {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.modal-content {
    border-radius: 0;
}

.modal-body {
    background: #fff;
}

.modal-footer {
    background: #fff;
}

.modal-body {
    color: #333;
}

    .modal-body .popoutbtn_ctrl {
        border-top: 1px solid #ddd;
        margin-top: 15px;
        padding-top: 15px;
        text-align: right;
    }
/*========================================================================
pop out confirmation panel
==========================================================================*/
#confirmationpanel {
    width: 100%;
}

    #confirmationpanel .cmd_content {
        color: #333;
        padding: 15px 0;
        text-align: left;
    }

    #confirmationpanel .cfm_cmd {
        text-align: center;
        border-top: 1px solid #ddd;
        padding-top: 15px;
    }
/*========================================================================
    rl_result
==========================================================================*/
.rl_result {
    display: block;
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-weight: 600;
    border: 1px solid;
    position: relative;
}

    .rl_result.low {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

    .rl_result.medium {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

    .rl_result.high {
        background-color: #f2dede;
        border-color: #ebcccc;
        color: #a94442;
    }

    .rl_result.info {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }
/*========================================================================
small loader
==========================================================================*/
.small_loader_panel {
    position: relative;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    -moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
    -o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
    -webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
    transition: opacity 0.25s ease 0s, visibility 0.35s linear;
    transition: 0.5s;
    background: transparent;
}

    .small_loader_panel.is-visible {
        opacity: 1;
        visibility: visible;
        z-index: 999;
        -moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
        -o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
        -webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
        -webkit-transition-delay: 0s, 0s;
        transition: opacity 0.25s ease 0s, visibility 0.35s linear;
        transition: 0.5s;
        background: transparent;
    }

    .small_loader_panel .circularG {
        position: absolute;
        background-color: rgb(39,176,217);
        width: 5px;
        height: 5px;
        border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        animation-name: bounce_circularG;
        -o-animation-name: bounce_circularG;
        -ms-animation-name: bounce_circularG;
        -webkit-animation-name: bounce_circularG;
        -moz-animation-name: bounce_circularG;
        animation-duration: 1.1s;
        -o-animation-duration: 1.1s;
        -ms-animation-duration: 1.1s;
        -webkit-animation-duration: 1.1s;
        -moz-animation-duration: 1.1s;
        animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        animation-direction: normal;
        -o-animation-direction: normal;
        -ms-animation-direction: normal;
        -webkit-animation-direction: normal;
        -moz-animation-direction: normal;
    }

    .small_loader_panel .circularG_1 {
        left: 0;
        top: 9px;
        animation-delay: 0.41s;
        -o-animation-delay: 0.41s;
        -ms-animation-delay: 0.41s;
        -webkit-animation-delay: 0.41s;
        -moz-animation-delay: 0.41s;
    }

    .small_loader_panel .circularG_2 {
        left: 2px;
        top: 2px;
        animation-delay: 0.55s;
        -o-animation-delay: 0.55s;
        -ms-animation-delay: 0.55s;
        -webkit-animation-delay: 0.55s;
        -moz-animation-delay: 0.55s;
    }

    .small_loader_panel .circularG_3 {
        top: 0;
        left: 9px;
        animation-delay: 0.69s;
        -o-animation-delay: 0.69s;
        -ms-animation-delay: 0.69s;
        -webkit-animation-delay: 0.69s;
        -moz-animation-delay: 0.69s;
    }

    .small_loader_panel .circularG_4 {
        right: 2px;
        top: 2px;
        animation-delay: 0.83s;
        -o-animation-delay: 0.83s;
        -ms-animation-delay: 0.83s;
        -webkit-animation-delay: 0.83s;
        -moz-animation-delay: 0.83s;
    }

    .small_loader_panel .circularG_5 {
        right: 0;
        top: 9px;
        animation-delay: 0.97s;
        -o-animation-delay: 0.97s;
        -ms-animation-delay: 0.97s;
        -webkit-animation-delay: 0.97s;
        -moz-animation-delay: 0.97s;
    }

    .small_loader_panel .circularG_6 {
        right: 2px;
        bottom: 2px;
        animation-delay: 1.1s;
        -o-animation-delay: 1.1s;
        -ms-animation-delay: 1.1s;
        -webkit-animation-delay: 1.1s;
        -moz-animation-delay: 1.1s;
    }

    .small_loader_panel .circularG_7 {
        left: 9px;
        bottom: 0;
        animation-delay: 1.24s;
        -o-animation-delay: 1.24s;
        -ms-animation-delay: 1.24s;
        -webkit-animation-delay: 1.24s;
        -moz-animation-delay: 1.24s;
    }

    .small_loader_panel .circularG_8 {
        left: 2px;
        bottom: 2px;
        animation-delay: 1.38s;
        -o-animation-delay: 1.38s;
        -ms-animation-delay: 1.38s;
        -webkit-animation-delay: 1.38s;
        -moz-animation-delay: 1.38s;
    }



@keyframes bounce_circularG {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(.3);
    }
}

@-o-keyframes bounce_circularG {
    0% {
        -o-transform: scale(1);
    }

    100% {
        -o-transform: scale(.3);
    }
}

@-ms-keyframes bounce_circularG {
    0% {
        -ms-transform: scale(1);
    }

    100% {
        -ms-transform: scale(.3);
    }
}

@-webkit-keyframes bounce_circularG {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(.3);
    }
}

@-moz-keyframes bounce_circularG {
    0% {
        -moz-transform: scale(1);
    }

    100% {
        -moz-transform: scale(.3);
    }
}
/*========================================================================
laoder with timer
==========================================================================*/
.setloadertimer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background: #808080;
    opacity: 0.8;
}

    .setloadertimer.is-visible {
        display: block;
    }

.loadertimer .circle {
    position: absolute;
    border: 3px solid transparent;
    border-top-color: #9ee925;
    border-radius: 50%;
    -webkit-animation: rotate linear infinite;
    animation: rotate linear infinite;
}

    .loadertimer .circle.one {
        height: 50px;
        width: 50px;
        left: 50px;
        top: 50px;
        -webkit-animation-duration: 0.85s;
        animation-duration: 0.85s;
    }

    .loadertimer .circle.two {
        height: 75px;
        width: 75px;
        top: 38px;
        left: 38px;
        -webkit-animation-duration: 0.95s;
        animation-duration: 0.95s;
    }

    .loadertimer .circle.three {
        height: 100px;
        width: 100px;
        top: 25px;
        left: 25px;
        -webkit-animation-duration: 1.05s;
        animation-duration: 1.05s;
    }

.loader_panel .loadertimer {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -90px 0 0 -90px;
}

.loader_panel .text {
    position: absolute;
    top: 40%;
    left: 46%;
    font-size: 18px;
    color: #fff !important;
}

.loader_panel .loader_cancelbtn {
    position: absolute;
    top: 70%;
    left: 43%;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
}

    .loader_panel .loader_cancelbtn:hover {
        text-decoration: underline !important;
    }

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }

    to {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }

    to {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
/*========================================================================
loader
==========================================================================*/
.mainloaderpanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s;
}

    .mainloaderpanel.is-visible {
        position: fixed;
        z-index: 99999;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.15s, visibility 0.15s;
    }

.mainloader .leftEye,
.mainloader .rightEye {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    background: #48C2D6;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: leftEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: leftEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.mainloader .rightEye {
    -webkit-animation: rightEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: rightEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.mainloader .mouth {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    border: solid 1.3vh #48C2D6;
    border-right: solid 1.3vh rgba(223,223,194,0);
    border-left: solid 1.3vh rgba(223,223,194,0);
    border-bottom: solid 1.3vh rgba(223,223,194,0);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
    -webkit-animation: mouthAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: mouthAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@-webkit-keyframes mouthAnimation {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateX(180deg);
        transform: translate(-50%, -50%) rotateX(180deg);
    }

    10% {
        -webkit-transform: translate(-50%, -50%) rotateZ(360deg);
        transform: translate(-50%, -50%) rotateZ(360deg);
    }

    40% {
        -webkit-transform: translate(-50%, -50%) rotateZ(320deg);
        transform: translate(-50%, -50%) rotateZ(320deg);
    }

    60% {
        -webkit-transform: translate(-50%, -50%) rotateZ(900deg);
        transform: translate(-50%, -50%) rotateZ(900deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotateZ(900deg);
        transform: translate(-50%, -50%) rotateZ(900deg);
    }
}

@keyframes mouthAnimation {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateX(180deg);
        transform: translate(-50%, -50%) rotateX(180deg);
    }

    10% {
        -webkit-transform: translate(-50%, -50%) rotateZ(360deg);
        transform: translate(-50%, -50%) rotateZ(360deg);
    }

    40% {
        -webkit-transform: translate(-50%, -50%) rotateZ(320deg);
        transform: translate(-50%, -50%) rotateZ(320deg);
    }

    60% {
        -webkit-transform: translate(-50%, -50%) rotateZ(900deg);
        transform: translate(-50%, -50%) rotateZ(900deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotateZ(900deg);
        transform: translate(-50%, -50%) rotateZ(900deg);
    }
}

@-webkit-keyframes leftEyeAnimation {
    0% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    50% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    60% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(-150%, -50%);
        transform: translate(-150%, -50%);
    }

    90% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(-150%, -50%);
        transform: translate(-150%, -50%);
    }

    100% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@keyframes leftEyeAnimation {
    0% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    50% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    60% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(-150%, -50%);
        transform: translate(-150%, -50%);
    }

    90% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(-150%, -50%);
        transform: translate(-150%, -50%);
    }

    100% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@-webkit-keyframes rightEyeAnimation {
    0% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    50% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    60% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    70% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    75% {
        width: 2vh;
        height: 2px;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    80% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    90% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    100% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@keyframes rightEyeAnimation {
    0% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    50% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    60% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    70% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    75% {
        width: 2vh;
        height: 2px;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    80% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    90% {
        width: 2vh;
        height: 2vh;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    100% {
        width: 5vh;
        height: 5vh;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
/*========================================================================
input_group
==========================================================================*/
.input_group .small_loader_panel {
    position: absolute;
    top: 26px;
    left: auto;
    right: 20px;
}

.input_group .icon_span {
    position: relative;
    font-size: 11px;
    color: #ff0000;
    font-weight: 600;
}

    .input_group .icon_span.valid {
        color: #00c747;
    }

    .input_group .icon_span.invalid {
        color: #ff0000;
    }
/*========================================================================
info-group
==========================================================================*/
.info-group {
    width: 100%;
}

    .info-group label {
        font-weight: 600;
        display: block;
        width: 100%;
        text-decoration: underline;
    }

        .info-group label.uncompleted {
            color: #ff0000;
        }

    .info-group span {
        display: block;
    }

.tab-content {
    padding: 30px 25px 50px 25px;
    border: 1px solid #ddd;
    border-top: none;
    background: #fff;
    position: relative;
    min-height: 100px;
}

    .tab-content h3 {
        margin-top: 0;
        margin-left: 0;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 10px;
        right: 30px;
        z-index: 1;
        font-style: italic;
    }

.nav-tabs > li > a {
    font-weight: 600;
}
/*==================================================================
ncpanel
==================================================================*/
.ncpanel {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    z-index: 2;
    transition: .2s;
    flex-shrink: 0;
    background: #fff;
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    display: block;
    margin: 0 auto;
    min-height: 0;
    width: 100%;
}

    .ncpanel.px600 {
        width: 600px;
    }

    .ncpanel.p800 {
        width: 800px;
    }

    .ncpanel.px450 {
        width: 800px;
    }

    .ncpanel .nc {
        flex-grow: 1;
        box-sizing: border-box;
        overflow: hidden;
        padding: 25px;
        height: auto;
        min-height: 500px;
        overflow-y: auto;
    }

        .ncpanel .nc h4 {
            font-weight: 600;
            border-bottom: 1px solid #ddd;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }

        .ncpanel .nc .dob_ul {
            width: 100%;
        }

            .ncpanel .nc .dob_ul li {
                width: 32.5%;
                display: inline-block;
            }
/*==================================================================
text box animation
    ==================================================================*/
.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 10px 5px 10px 5px;
    max-width: 100%;
    width: 100%;
    vertical-align: top;
}

    .input.blocked input {
        pointer-events: none;
    }

.input__field {
    position: relative;
    display: block;
    float: right;
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 0;
    background: #fff;
    color: #aaa;
    font-weight: 400;
    -webkit-appearance: none; /* for box shadows to show on iOS */
}

    .input__field:focus {
        outline: none;
    }
/* Yoshiko */
.input__field--yoshiko {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #aaa;
    -webkit-transition: background-color 0.25s, border-color 0.25s;
    transition: background-color 0.25s, border-color 0.25s;
}

.input__label--yoshiko {
    width: 100%;
    text-align: left;
    position: absolute;
    bottom: 100%;
    pointer-events: none;
    overflow: hidden;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
    -webkit-transition: -webkit-transform 0.25s;
    transition: transform 0.25s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.input__label-content--yoshiko {
    color: #757575;
    padding: 12px 0;
    -webkit-transition: -webkit-transform 0.25s;
    transition: transform 0.25s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

    .input__label-content--yoshiko::after {
        content: attr(data-content);
        position: absolute;
        font-weight: 800;
        bottom: 100%;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 16px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.85em;
    }

.input__field--yoshiko:focus + .input__label--yoshiko,
.input--filled .input__label--yoshiko {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    font-size: 12px;
}

    .input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko,
    .input--filled .input__label-content--yoshiko {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        font-size: 12px;
        color: #4285f4;
    }

.input__field--yoshiko:focus + .input__field--yoshiko,
.input--filled .input__field--yoshiko {
    border-color: #4285f4;
}

.input.blocked .input__field--yoshiko {
    border-color: #ddd;
}

.input.require .input__field--yoshiko, .input.require .input__label-content--yoshiko {
    border-color: #d33;
    color: #d33;
}

.input.require .input--filled {
    color: #d33;
}

.input .v_loader {
    position: absolute;
    top: -5px;
    right: 20px;
    left: auto;
}

.input.blocked .input__label-content {
    color: rgba(0, 0, 0, .4);
}

.input .input_error {
    color: #d33;
}
/*==================================================================
btn_div
==================================================================*/
.btn_div {
    width: 100%;
    text-align: right;
}
/*==================================================================
vertical loader
    ==================================================================*/
.v_loader {
    color: #48C2D6;
    font-size: 10px;
    margin: 0 auto;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    visibility: hidden;
    display: none;
}

    .v_loader.is-visible {
        visibility: visible;
        display: block;
    }

    .v_loader,
    .v_loader:before,
    .v_loader:after {
        border-radius: 50%;
        width: 15px;
        height: 15px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: load7 1.8s infinite ease-in-out;
        animation: load7 1.8s infinite ease-in-out;
    }



        .v_loader:before,
        .v_loader:after {
            content: '';
            position: absolute;
            top: 0;
        }

        .v_loader:before {
            left: -20px;
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .v_loader:after {
            left: 20px;
        }

@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
/*==================================================================
error pages
    ==================================================================*/
.errorpage h2 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-weight: 600;
}

.errorpage h3 {
    font-weight: 600;
}

.errorpage .btnctrl {
    display: block;
    margin: 20px 0;
}

@media all {
    .page-break {
        display: none;
    }
}

@media print {
    .page-break {
        display: block;
        page-break-before: always;
        padding-top: 40px;
    }
}
/*========================================================================
pagination
==========================================================================*/
nav[role="navigation"] {
    text-align: center;
}

.cd-pagination {
    width: 100%;
    margin: 2em auto 4em;
    text-align: center;
}

    .cd-pagination li {
        /* hide numbers on small devices */
        display: none;
        margin: 0 .2em;
    }

        .cd-pagination li.pagetitle {
            display: inline-block;
            font-weight: 600;
        }

        .cd-pagination li.button {
            /* make sure prev next buttons are visible */
            display: inline-block;
        }

    .cd-pagination a, .cd-pagination span {
        display: inline-block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* use padding and font-size to change buttons size */
        padding: 10px 15px;
        font-size: 14px;
        color: #333;
    }

    .cd-pagination a {
        border: 1px solid #e6e6e6;
        border-radius: 0.25em;
    }

.no-touch .cd-pagination a:hover {
    background-color: #f2f2f2;
}

.cd-pagination a:active {
    /* click effect */
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

.cd-pagination a.disabled {
    /* button disabled */
    color: rgba(46, 64, 87, 0.4);
    pointer-events: none;
}

.cd-pagination .pagetitle a.disabled {
    /* button disabled */
    color: #333;
}

.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {
    opacity: .4;
}

.cd-pagination .current {
    /* selected number */
    background-color: #64a281;
    border-color: #64a281;
    color: #ffffff;
    pointer-events: none;
}

@media only screen and (min-width: 768px) {
    nav[role="navigation"] {
        text-align: right;
    }

    .cd-pagination {
        text-align: right;
    }

        .cd-pagination li {
            display: inline-block;
        }

            .cd-pagination li.pagetitle {
                display: none;
            }
}

@media only screen and (min-width: 1170px) {
    .cd-pagination {
        margin: 4em auto 8em;
    }
}
/* -------------------------------- 

No space - remove distance between list items

-------------------------------- */
.cd-pagination.no-space {
    width: auto;
    max-width: none;
    display: inline-block;
    border-radius: 0.25em;
    border: 1px solid #e6e6e6;
}

    .cd-pagination.no-space::after {
        clear: both;
        content: "";
        display: table;
    }

    .cd-pagination.no-space li {
        margin: 0;
        float: left;
        border-right: 1px solid #e6e6e6;
    }

        .cd-pagination.no-space li:last-of-type {
            border-right: none;
        }

    .cd-pagination.no-space a, .cd-pagination.no-space span {
        float: left;
        border-radius: 0;
        padding: 10px 15px;
        border: none;
    }

    .cd-pagination.no-space li:first-of-type a {
        border-radius: 0.25em 0 0 0.25em;
    }

    .cd-pagination.no-space li:last-of-type a {
        border-radius: 0 0.25em 0.25em 0;
    }

nav[role="navigation"] .page_summary {
    font-size: 13px;
    font-weight: 600;
}
/* Minoru */
.input__field--minoru {
    width: 100%;
    background: #fff;
    box-shadow: 0px 0px 0px 2px transparent;
    color: #333;
    -webkit-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s;
    height: 30px;
    font-weight: 600;
    font-size: 15px;
}

.input__label--minoru {
    padding: 0;
    width: 100%;
    text-align: left;
}

    .input__label--minoru::after {
        content: '';
        position: absolute;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 4em;
        box-shadow: 0px 0px 0px 0px;
        color: rgba(199,152,157, 0.6);
    }

.input__field--minoru:focus {
    box-shadow: 0px 0px 0px 2px #eca29b;
}

    .input__field--minoru:focus + .input__label--minoru {
        pointer-events: none;
    }

        .input__field--minoru:focus + .input__label--minoru::after {
            -webkit-animation: anim-shadow 0.3s forwards;
            animation: anim-shadow 0.3s forwards;
        }

@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 100px 50px;
        opacity: 0;
    }
}

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 100px 50px;
        opacity: 0;
    }
}

.input__label-content--minoru {
    padding: 0;
    font-weight: 600;
    font-size: 13px;
    color: #6a7989;
}

mark {
    border: 0.5px solid rgba(199,152,157, 0.6);
}
/*==================================================================
input group input    
==================================================================*/
.input-group {
    width: auto;
    display: block;
    position: relative;
    background: #fff;
    padding: 0;
    height: auto;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 0 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: left;
}

    .input-group i {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1px;
        display: block;
    }

    .input-group .input-content {
        height: auto;
    }

    .input-group .inputval {
        width: 100%;
        height: 43px;
        background: transparent;
        z-index: 6;
        border: none;
        position: relative;
        padding-top: 20px;
        top: 0;
        font-size: 90%;
    }

    .input-group label.title {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 1;
        transition: all 0.3s;
        color: #ddd;
        font-weight: 600;
        font-size: 90%;
    }

    .input-group.hasvalue label.title, .input-group input:focus ~ label.title {
        top: 5px;
        font-size: 80%;
        color: #F79421;
        transition: all 0.3s;
    }

    .input-group input.invalid ~ label.title {
        color: #ff0000;
    }

    .input-group input.invalid:not(:focus) ~ label.title {
        color: #999;
    }

    .input-group.hasvalue input.invalid:not(:focus) ~ label.title {
        color: #ff0000;
    }

    .input-group .input-content ~ label.title {
        color: #ff0000;
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }

    .input-group.requiredfield {
        border-color: #ff0000;
        transition: border-color 0.5s;
    }

    .input-group.withspan .inputval {
        padding-left: 17px;
    }

    .input-group.withspan span {
        position: absolute;
        left: 15px;
        top: 18px;
        visibility: hidden;
        font-weight: 600;
    }

    .input-group.withspan input.invalid:not(:focus) ~ span {
        visibility: hidden;
    }

    .input-group.withspan.hasvalue span, .input-group input:focus ~ span {
        visibility: visible;
    }
    /*==================================================================
  color picker  
==================================================================*/
    .input-group[data-type='colorpicker'] .palette-color-picker-button {
        position: absolute;
        top: 8px;
        right: 5px;
        z-index: 7;
    }

    /*==================================================================
  dropdown  
==================================================================*/
    .input-group[data-type='dropdown'] label.title {
        position: absolute;
        top: 5px;
        left: 15px;
        font-weight: 600;
        font-size: 75%;
        transition: all 0.3s;
        color: #F79421;
    }

    .input-group[data-type='dropdown'] {
        padding: 0;
        border: none;
        height: 50px;
    }

        .input-group[data-type='dropdown'] .dd-selected {
            color: #333;
            font-weight: normal;
            font-size: 95%;
            padding: 21px 0 0 14px;
        }

        .input-group[data-type='dropdown'] .dd-container, .input-group[data-type='dropdown'] .dd-select, .input-group[data-type='dropdown'] .dd-options {
            width: 100% !important;
            font-size: 95%;
        }

        .input-group[data-type='dropdown'] .dd-select {
            height: 45px;
            background: #fff !important;
        }

        .input-group[data-type='dropdown'].graybg .dd-select {
            background: rgb(238, 238, 238) none repeat scroll 0% 0% !important;
        }
        /*with image*/
        .input-group[data-type='dropdown'].withimage .dd-selected-image {
            float: right;
            margin-right: 5px;
        }

        .input-group[data-type='dropdown'].withimage .dd-selected {
            padding: 7px 0 0 14px;
        }

    .input-group.dropdown.withimage .dd-selected .dd-selected-image {
        margin-right: 25px;
    }

    .input-group[data-type='dropdown'].withimage .dd-option-text {
        line-height: 25px !important;
    }

    .input-group[data-type='dropdown'] .dd-selected-text, .input-group[data-type='dropdown'] .dd-option-text {
        width: 74%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        margin-bottom: 0 !important;
    }

    .input-group[data-type='dropdown'] .dd-option {
        padding: 10px 10px 5px !important;
    }
    /*==================================================================
  calender  
==================================================================*/
    .input-group[data-type='calendar'] input {
        cursor: pointer;
    }

    .input-group[data-type='calendar'] .ddcal {
        position: absolute;
        left: 0;
        top: 46px;
        width: 100%;
        max-width: 280px;
        background: #fff;
        z-index: 3;
        border: 1px solid #ddd;
        padding: 10px 5px;
        opacity: 0;
        visibility: hidden;
    }

    .input-group[data-type='calendar'].show .ddcal {
        opacity: 1;
        visibility: visible;
    }

    .input-group[data-type='calendar'] .select_div {
        margin-bottom: 10px;
        padding: 0 5px;
    }

    .input-group[data-type='calendar'] select {
        font-size: 90%;
        height: 30px;
        padding-left: 10px;
        width: 100%;
    }

        .input-group[data-type='calendar'] select.month_dd {
            display: block;
            margin-right: 5px;
        }

        .input-group[data-type='calendar'] select.year_dd {
            display: block;
            margin-left: 5px;
        }

    .input-group[data-type='calendar'] .cal_ul {
        width: 100%;
    }

        .input-group[data-type='calendar'] .cal_ul li {
            width: 14%;
            display: inline-block;
            color: #536c79;
            font-weight: 600;
            font-size: 80%;
            text-align: center;
        }

        .input-group[data-type='calendar'] .cal_ul.cal_content_ul li {
            padding: 2px 0;
        }

            .input-group[data-type='calendar'] .cal_ul.cal_content_ul li a {
                font-size: 90%;
                background: transparent;
                border-radius: 50%;
                cursor: pointer;
                display: block;
                padding: 6px 4px;
                margin: 0 2px;
            }

            .input-group[data-type='calendar'] .cal_ul.cal_content_ul li:hover a {
                background: #ddd;
            }

            .input-group[data-type='calendar'] .cal_ul.cal_content_ul li.selected a {
                background-color: #1fc77c;
                color: #fff;
            }

            .input-group[data-type='calendar'] .cal_ul.cal_content_ul li.today a {
                border: 0.5px solid #ddd;
            }

    /*===============================================
lds-ripple loader small
===============================================*/
    .input-group .lds-ripple {
        position: absolute;
        top: -5px;
        right: 10px;
    }
/*===============================================
lds-dual-ring
===============================================*/
.lds-dual-ring {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-top: 5px;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 40px;
        height: 40px;
        margin: 1px;
        border-radius: 50%;
        border: 5px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*===============================================
check box
===============================================*/
.input-group[data-type='checkbox'] {
    padding: 0;
    height: 50px;
    width: auto;
    display: block;
    position: relative;
    border: none;
}

    .input-group[data-type='checkbox'] .switch {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.cmn-toggle {
    position: absolute;
    /*margin-left: -9999px;*/
    visibility: hidden;
    width: 100%;
    height: 100%;
}

    .cmn-toggle ~ label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

input.cmn-toggle-yes-no ~ label {
    width: 100%;
    height: 45px;
    position: absolute;
    top: 0 !important;
    left: 0 !important;
}

    input.cmn-toggle-yes-no ~ label:before, input.cmn-toggle-yes-no ~ label:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 45px;
    }

    input.cmn-toggle-yes-no ~ label:before {
        background-color: #dddddd;
        content: attr(data-off);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    input.cmn-toggle-yes-no ~ label:after {
        background-color: #8ce196;
        content: attr(data-on);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

input.cmn-toggle-yes-no:checked ~ label:before {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

input.cmn-toggle-yes-no:checked ~ label:after {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
}
/*==================================================================
  text area  
==================================================================*/
.input-group.textarea .inputval {
    padding-top: 20px;
}
/*==================================================================
phone
==================================================================*/
.phone {
    width: 100%;
}

    .phone .dropdown {
        width: 38%;
        display: inline-block;
    }

        .phone .dropdown img {
            width: 25px;
            height: auto !important;
        }

        .phone .dropdown label {
            line-height: 12px !important;
        }

        .phone .dropdown .dd-selected-text, .phone .dropdown .dd-option-text {
            width: 60%;
        }

    .phone[data-type='textbox'] {
        width: 60%;
        display: inline-block;
        vertical-align: top;
    }

/*===============================================
check box : alternative
===============================================*/
.checkbox-group input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
}

.checkbox-group label {
    cursor: pointer;
    text-indent: -9999px;
    width: 100px;
    height: 50px;
    background: grey;
    display: block;
    border-radius: 50px;
    position: relative;
    margin: 0 auto;
    vertical-align: top;
}

    .checkbox-group label:after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 40px;
        transition: 0.3s;
    }

.checkbox-group input:checked + label {
    background: #bada55;
}

    .checkbox-group input:checked + label:after {
        left: calc(100% - 5px);
        transform: translateX(-100%);
    }

.checkbox-group label:active:after {
    width: 130px;
}
/*==================================================================
 ripple   
==================================================================*/
.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}

.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.italic-bold {
    font-weight: bold;
    font-style: italic;
}
.wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.wrapper_landscape {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.wrapper_landscape_ubo {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

table.full_border, table.full_border_3p {
    border-collapse: collapse;
}

    table.full_border tr th, table.full_border tr td {
        border-width: 1px;
        border-style: solid;
        border-color: #C4C1C0;
        padding: 5px;
    }

    table.full_border tr th {
        font-size: 12px;
        background-color: #DAEEF3;
    }

    table.full_border_3p tr td {
        font-size: 7px;
        border-width: 1px;
        border-style: solid;
        border-color: #C4C1C0;
        padding: 1px;
    }

    table.full_border_3p tr th {
        border-width: 1px;
        border-style: solid;
        border-color: #C4C1C0;
        padding: 5px;
    }

table.woborder tr td {
    border: 0;
}

.no-margin {
    margin: 0;
}

.margin20 {
    margin: 20px 0 0 0;
}

.margin10 {
    margin: 10px 0 0 0;
}

table.nobottom {
    border: 1px solid #C4C1C0;
    padding: 0;
    border-collapse: collapse;
}

.nobottom th {
    border: 1px solid #C4C1C0;
    background-color: #DAEEF3;
    font-size: 12px;
    padding: 5px;
    margin: 0px;
}

.nobottom td {
    border-left: 1px solid #C4C1C0;
    border-right: 1px solid #C4C1C0;
    padding: 3px;
    margin: 0px;
}

    .nobottom td.show_border {
        border: 1px solid #C4C1C0;
        padding: 3px;
        margin: 0px;
    }

    .nobottom td.show_border2 {
        border: 1px solid #C4C1C0;
        padding: 3px;
        margin: 0px;
        border-bottom: white;
    }

table.nostyle {
    border: 1px solid #C4C1C0;
    padding: 0;
    border-collapse: collapse;
}

.nostyle tr th {
    padding: 5px;
    font-size: 12px;
    background-color: #DAEEF3;
}

.nostyle td {
    padding: 5px;
    margin: 0px;
    border: 0px;
}

    .nostyle td.show_border, .nostyle th.show_border {
        border: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle td.show_right_border {
        border-right: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle td.show_left_border {
        border-left: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle td.show_bottom_border {
        border-bottom: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle td.show_top_border {
        border-top: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }
/*
.background_DAEEF3 {
    background-color: #DAEEF3;
}

.bold {
    font-weight: bold;
}

.legend {
    margin: 3px;
    border-collapse: collapse;
    border-width: 1px;
    border-style: solid;
    border-color: #DAEEF3;
}

    .legend td {
        text-align: center;
    }

.total {
    text-decoration: overline underline;
}

.small {
    font-size: 9px;
    font-weight: normal;
}

.highlight {
    background-color: #DAEEF3;
}

.highlight_F8F8FF {
    background-color: #F8F8FF;
}


.padding5 {
    padding: 5px;
}

.padding8 {
    padding: 8px;
}

.prev_enq {
    border-collapse: collapse;
}

    .prev_enq th, .prev_enq td {
        border-width: 1px;
        border-style: solid;
        border-color: black;
        text-align: center;
    }

.liteblue {
    color: #17365D;
}

.blue {
    color: #00f;
}

.term {
    text-align: justify;
    font-size: 9px;
    padding: 0px;
    margin: 0px;
}

.h3 {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 5px;
}

.report-date {
    font-size: 12px;
}

.h2 {
    font-family: arial,san-serif;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.font12 {
    font-size: 12px;
}

ol {
    counter-reset: item
}

li {
    display: block
}

    li:before {
        content: counter(item) ". ";
        counter-increment: item
    }

.pcr_report_title {
    font-size: large;
    font-weight: bold;
    display: inline-block;
    width: 60%;
}

.pcr_report_details_box {
    display: inline-block;
    width: 30%;
    border-style: solid;
    border-width: thin;
    padding: 5px 30px;
    border-color: #C4C1C0;
}

.pcr_report_detail_title {
    display: inline-block;
    width: 35%;
}

.pcr_report_logo {
    margin-right: 78%;
}

.ccr1_report_logo {
    margin-right: 74%;
}

.underline {
    text-decoration: underline;
}

.kyc_header {
    background-color: #DAEEF3;
    text-align: justify;
}

.kyc_request_table {
    font-size: 12px;
}


table.nostyle_11 {
    border: 1px solid #C4C1C0;
    padding: 0;
    border-collapse: collapse;
}

.nostyle_11 tr th {
    padding: 5px;
    font-size: 12px;
    background-color: #DAEEF3;
}

.nostyle_11 td {
    padding: 5px;
    margin: 0px;
    border: 0px;
    font-size: 8px;
}

    .nostyle_11 td.show_border, .nostyle_11 th.show_border {
        border: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle_11 td.show_right_border {
        border-right: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle_11 td.show_left_border {
        border-left: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle_11 td.show_bottom_border {
        border-bottom: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

    .nostyle_11 td.show_top_border {
        border-top: 1px solid #C4C1C0;
        padding: 5px;
        margin: 0px;
    }

.idtc_note {
    font-style: italic;
    text-align: justify;
}

.commercial {
    padding-left: 10em;
}

.bgRedFontWhite {
    background-color: red;
    color: white;
}

.justify {
    text-align: justify;
    text-justify: inter-word;
}

.left {
    float: left;
}

.right {
    float: right;
}

.uline {
    text-decoration: underline;
}

#id_confrmdiv button {
    border-radius: 5px;
    background: #bfd4bf;
    margin-right: 10px;
    padding: 4px 15px;
    cursor: pointer;
    width: 100px;
    margin-left: 70px;
}
*/
.header_logo {
    max-height: 30px;
}
/*========================================================================
txpanel
==========================================================================*/
.contentpanel {
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 25px;
    position: relative;
    text-align: center;
    background-color: #f9f9f9;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    margin-bottom: 15px;
}

    .contentpanel h5 {
        text-align: left;
        font-weight: 600;
    }

        .contentpanel h5 #tx_showhide_a {
            float: right;
            width: auto;
        }

#txpanel h5 .searchinput {
    width: 350px;
    display: inline-block;
    margin-left: 15px;
}
/*========================================================================
cr_list_ul
==========================================================================*/
.cr_list_ul {
    width: 100%;
    height: auto;
    text-align: left;
}

    .cr_list_ul li {
        width: 32.8%;
        display: inline-block;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 5px;
    }

        .cr_list_ul li .cr_title {
            width: 100%;
            margin-bottom: 0;
        }

            .cr_list_ul li .cr_title td {
                vertical-align: middle;
            }

                .cr_list_ul li .cr_title td:first-child {
                    width: 40%;
                }

                .cr_list_ul li .cr_title td:last-child {
                    width: 60%;
                }

                .cr_list_ul li .cr_title td img {
                    width: 100%;
                    max-width: 80px;
                }

        .cr_list_ul li .ellipsis {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .cr_list_ul li .cr_list_tb {
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            background: #fff;
            pointer-events: all;
            cursor: pointer;
        }

            .cr_list_ul li .cr_list_tb:hover, .cr_list_ul li .cr_list_tb:active {
                -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            }

            .cr_list_ul li .cr_list_tb.isdefault {
                background: rgba(0, 0, 0, 0.055);
                pointer-events: none;
                cursor: none;
            }

        .cr_list_ul li .cr_rate {
            margin-bottom: 0;
            width: 100%;
            border: 1px solid #ddd;
        }

            .cr_list_ul li .cr_rate td {
                border-bottom: none !important;
                padding: 0 5px;
                vertical-align: middle;
                text-align: center;
                border: 1px solid #ddd;
            }

.paging_arrow {
    width: 100%;
    position: relative;
    display: block;
    height: 14px;
}

    .paging_arrow a:first-child {
        text-align: left;
        display: inline-block;
        float: left;
    }

    .paging_arrow a:last-child {
        text-align: right;
        float: right;
    }

    .paging_arrow a i {
        color: rgba(0, 0, 0, 0.3);
    }

        .paging_arrow a i:hover {
            color: rgba(0, 0, 0, 0.5);
        }

.contentpanel .customer_cmd {
    width: 100%;
    text-align: right;
}

/*========================================================================
customerinfo
==========================================================================*/
.customerinfo {
    text-align: left;
}

    .customerinfo .float_message {
        position: absolute;
        top: 15px;
        right: 15px;
        text-align: right;
        width: 100%;
    }

        .customerinfo .float_message li {
            display: inline-block;
        }

    .customerinfo h6 {
        text-align: left;
        font-weight: 600;
    }

    .customerinfo .riskscore {
        text-align: center;
    }

    .customerinfo .customername {
        font-size: 16px;
        font-weight: 600;
        color: #48C2D6;
    }

    .customerinfo .uncompleted {
        color: #ff0000;
    }

    .customerinfo .remarks_ul {
        width: 100%;
        text-align: left;
        position: relative;
    }

        .customerinfo .remarks_ul li {
            display: block;
            position: relative;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

            .customerinfo .remarks_ul li.rl_result {
                max-width: 100%;
            }

        .customerinfo .remarks_ul input {
            width: auto;
            display: inline-block;
            float: right;
        }

        .customerinfo .remarks_ul .datetime {
            padding-left: 5px;
        }

        .customerinfo .remarks_ul .deleteremark_css {
            color: #48C2D6 !important;
            font-size: 11px;
            text-decoration: none;
        }

            .customerinfo .remarks_ul .deleteremark_css:hover {
                text-decoration: underline;
            }

    .customerinfo .id_ul {
        width: 100%;
    }

        .customerinfo .id_ul li {
            width: 100%;
            margin-bottom: 0;
        }

.customerinfo {
    width: 100%;
    font-size: 12px;
}

    .customerinfo .customer_tbl {
        width: 100%;
        margin-bottom: 0;
    }

        .customerinfo .customer_tbl table {
            width: 100%;
            border-bottom: none;
        }

        .customerinfo .customer_tbl td {
            width: 33.3333%;
            vertical-align: top;
            border-bottom: none;
            padding: 5px 0;
        }

            .customerinfo .customer_tbl td label {
                text-decoration: underline;
                display: block;
            }

    .customerinfo .pasttx_tbl {
        width: 100%;
        border: 1px solid #ddd;
    }

        .customerinfo .pasttx_tbl td {
            width: 25% !important;
            text-align: center !important;
            border: 1px solid #ddd !important;
            padding: 5px 0 !important;
        }

        .customerinfo .pasttx_tbl thead {
            font-weight: 600;
        }

    .customerinfo .remark_cbx {
        position: absolute;
        top: 40%;
        right: 20px;
    }
/*========================================================================
    select currency
==========================================================================*/
#txentrypanel .po_type_select {
    width: 100%;
    text-align: center;
}

    #txentrypanel .po_type_select .input-radio {
        position: relative;
        display: inline-block;
    }

        #txentrypanel .po_type_select .input-radio input {
            vertical-align: top;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
        }
            /* hide input */
            #txentrypanel .po_type_select .input-radio input:empty {
                margin-left: -999px;
                visibility: hidden;
                display: none;
            }

        #txentrypanel .po_type_select .input-radio label {
            position: relative;
            width: 150px;
            padding: 10px 15px;
            border: 1px solid transparent;
            cursor: pointer;
            background: #fff;
            font-weight: 600;
            margin-bottom: 0;
        }

        #txentrypanel .po_type_select .input-radio input:checked ~ label {
            border-color: #8fc400;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b6e026+0,abdc28+100;Green+Flat */
            background: #b6e026; /* Old browsers */
            background: -moz-linear-gradient(top, #b6e026 0%, #abdc28 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #b6e026 0%,#abdc28 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #b6e026 0%,#abdc28 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#abdc28',GradientType=0 ); /* IE6-9 */
            -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
            -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
            box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
        }

#txentrypanel .txentry_cmd {
    border-top: 1px solid #ddd;
    margin-top: 15px;
    padding-top: 15px;
    text-align: right;
}

    #txentrypanel .txentry_cmd .p-btn {
        width: 150px;
        display: inline-block;
    }

#txentrypanel .txentrycontent {
    width: 70%;
    margin: 20px auto;
    vertical-align: middle;
}

    #txentrypanel .txentrycontent img {
        width: 100%;
    }

    #txentrypanel .txentrycontent table {
        width: 100%;
        margin: 0 auto;
    }

        #txentrypanel .txentrycontent table td {
            border-bottom: none;
            vertical-align: top;
            padding-bottom: 5px;
        }

            #txentrypanel .txentrycontent table td #amount_input {
                max-width: 150px;
            }

            #txentrypanel .txentrycontent table td #rate_input {
                max-width: 100px;
                display: inline-block;
            }

            #txentrypanel .txentrycontent table td .ratecheck {
                color: #ff0000;
                font-weight: 600;
                padding-left: 5px;
                display: inline-block;
            }
/*========================================================================
CheckOutForm
==========================================================================*/
#CheckOutForm {
    width: 100%;
}

    #CheckOutForm .transactioninfo {
        padding-bottom: 10px;
        text-align: left;
    }

        #CheckOutForm .transactioninfo .form-control {
            margin-bottom: 10px;
        }

        #CheckOutForm .transactioninfo label {
            margin-bottom: 0;
        }

.currency_format {
    width: 100%;
    font-size: 30px;
    font-weight: 600;
    color: #ff6a00;
}

    .currency_format .unit {
        font-size: 14px;
    }

    .currency_format .amount {
        width: 100%;
    }
/*========================================================================
list_ul
==========================================================================*/
.list_ul {
    font-size: 12px;
    width: 100%;
}

    .list_ul li {
        width: 100%;
        position: relative;
    }

        .list_ul li .currency_list {
            display: block;
            text-align: left;
        }

            .list_ul li .currency_list .currency_img {
                width: 100%;
                vertical-align: top;
                width: 20%;
            }

            .list_ul li .currency_list .currency_title {
                font-weight: 600;
                vertical-align: middle;
                display: inline-block;
                padding-top: 5px;
                width: 60%;
                text-transform: uppercase;
            }

                .list_ul li .currency_list .currency_title .currency_unit {
                    display: block;
                }

        .list_ul li .list_tb {
            width: 100%;
            border: 1px solid #ddd;
            position: relative;
            margin-bottom: 0 !important;
        }

            .list_ul li .list_tb .type_title {
                color: #fff;
                width: 100%;
            }

                .list_ul li .list_tb .type_title.webuy {
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8fc400+0,8fc400+100;Green+Flat+%236 */
                    background: #8fc400; /* Old browsers */
                    background: -moz-linear-gradient(top, #8fc400 0%, #8fc400 100%); /* FF3.6-15 */
                    background: -webkit-linear-gradient(top, #8fc400 0%,#8fc400 100%); /* Chrome10-25,Safari5.1-6 */
                    background: linear-gradient(to bottom, #8fc400 0%,#8fc400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
                }

                .list_ul li .list_tb .type_title.wesell {
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
                    background: #e570e7; /* Old browsers */
                    background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6-15 */
                    background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10-25,Safari5.1-6 */
                    background: linear-gradient(to bottom, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
                }

            .list_ul li .list_tb td {
                padding: 3px;
                width: 35%;
                border: 1px solid #ddd;
                text-align: center;
                vertical-align: top;
            }

                .list_ul li .list_tb td.td_rate {
                    width: 30%;
                }

            .list_ul li .list_tb thead {
                font-weight: 600;
            }

        .list_ul li .list_ctrl {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 18px;
        }

            .list_ul li .list_ctrl a {
                color: rgba(0, 0, 0, 0.3) !important;
            }

        .list_ul li input {
            pointer-events: none;
            border: none;
            text-align: center;
            background: transparent;
            font-size: 12px;
        }

        .list_ul li.edit input {
            pointer-events: all;
            border: 1px solid rgba(0, 0, 0, 0.15);
            background: #fdff37;
        }
        /*========================================================================
list_loader
==========================================================================*/
        .list_ul li .list_loader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0;
            visibility: hidden;
        }

            .list_ul li .list_loader.is-visible {
                opacity: 1;
                visibility: visible;
                z-index: 5;
            }

            .list_ul li .list_loader .layer {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.4);
                border-radius: 5px;
            }

            .list_ul li .list_loader.is-visible .small_loader_panel {
                position: absolute;
                top: 50%;
                left: 50%;
                display: block;
                opacity: 1;
                visibility: visible;
            }

.contentpanel.cartlist h4 {
    font-weight: 600;
    border: 1px solid #aebf76;
    padding: 10px 0;
    color: #808080;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefd+0,dce3c4+42,aebf76+100;Olive+3D+%231 */
    background: #fefefd; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #fefefd 0%, #dce3c4 42%, #aebf76 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*========================================================================
    checkoutpanel
==========================================================================*/
#checkoutpanel .checkout_approval_panel {
    margin-top: 10px;
}

#checkoutpanel .allokay_panel .approve {
    color: #02b700;
}

#checkoutpanel .allokay_panel .rejected {
    color: #ff0000;
}

#checkoutpanel #approval_status_id {
    color: #ff0000;
    font-weight: 600;
    font-size: 11px;
}

#checkoutpanel .checkout_ctrl {
    border-top: 1px solid #ddd;
    margin-top: 15px;
    padding-top: 15px;
    text-align: right;
}
/*========================================================================
searchcustomerpanel
==========================================================================*/
#searchcustomerpanel .controlpanel {
    width: 100%;
    vertical-align: top;
}

#searchcustomerpanel #search_tb {
    width: 65%;
    display: inline-block;
}

#searchcustomerpanel #addnewcustomerbtn {
    width: 30%;
    display: inline-block;
}

#searchcustomerpanel .customerlist_tbl {
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 10px;
}

    #searchcustomerpanel .customerlist_tbl thead {
        font-weight: 600;
        background: rgba(0, 0, 0, 0.16);
        text-align: center;
        color: #333;
    }

    #searchcustomerpanel .customerlist_tbl td {
        border: 1px solid #ddd;
        padding: 5px 3px;
        font-size: 11px;
        text-align: center;
        width: 15%;
    }

    #searchcustomerpanel .customerlist_tbl tbody td:first-child {
        text-align: left;
        width: 40%;
    }
/*========================================================================
customerremarkpanel
==========================================================================*/
#customerremarkpanel .remarks_row {
    margin-top: 10px;
}

#customerremarkpanel textarea {
    height: 100px;
}
/*========================================================================
redflag_ul
==========================================================================*/
#redflagpanel .redflag_ul {
    width: 100%;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

    #redflagpanel .redflag_ul li.redflag_li {
        width: 100%;
        display: block;
    }

        #redflagpanel .redflag_ul li.redflag_li input {
            width: auto;
            margin-right: 10px;
            margin-bottom: 0;
        }

#redflagpanel .rf_btn {
    text-align: right;
}

    #redflagpanel .rf_btn .p-btn {
        max-width: 120px;
    }

#redflagpanel .remarks {
    width: 100%;
    height: 100px;
}
/*========================================================================
addupdatecustomerpanel
==========================================================================*/
#addupdatecustomerpanel {
    width: 100%;
}

    #addupdatecustomerpanel #addupdatecustomerform {
        padding: 0 10px;
    }

    #addupdatecustomerpanel h4 {
        font-weight: 600;
        width: 100%;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 10px;
        position: relative;
    }

        #addupdatecustomerpanel h4 i {
            font-size: 12px;
            float: right;
            position: relative;
            top: 10px;
        }

        #addupdatecustomerpanel h4 a {
            color: #808080;
            opacity: 0.6;
        }

            #addupdatecustomerpanel h4 a:hover {
                opacity: 1;
            }
/*========================================================================
counter control
==========================================================================*/
.countercontrol .counter_info {
    margin-bottom: 10px;
}

    .countercontrol .counter_info span {
        display: block;
        font-size: 12px;
    }

.countercontrol .counter_cmd .btn {
    display: block;
    margin-bottom: 5px;
}

.countercontrol .cc_ul .cc_li {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 10px;
    vertical-align: top;
}

    .countercontrol .cc_ul .cc_li .alert-cmd {
        position: absolute;
        top: 5px;
        right: 10px;
    }

        .countercontrol .cc_ul .cc_li .alert-cmd .ismaster {
            color: #f28704;
        }

    .countercontrol .cc_ul .cc_li span {
        font-size: 12px;
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .countercontrol .cc_ul .cc_li i {
        font-size: 12px;
        display: inline-block;
    }

        .countercontrol .cc_ul .cc_li i.fa-check {
            color: #8fc400;
        }

        .countercontrol .cc_ul .cc_li i.fa-exclamation-triangle {
            color: #f28704;
        }

.countercontrol .remarks {
    font-size: 12px;
}

    .countercontrol .remarks h5 {
        font-weight: 600;
    }

@media screen and (min-width: 768px) {
    .countercontrol .cc_cmd {
        text-align: left;
    }

    .countercontrol .cc_ul .cc_li {
        display: inline-block;
        width: 49.3%;
    }
}

@media screen and (min-width: 996px) {
    .countercontrol .cc_ul .cc_li {
        width: 32.8%;
    }
}
/*========================================================================
counter balance list
==========================================================================*/
#counterbalancepanel {
    font-size: 12px;
}

    #counterbalancepanel .cc_cmd {
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }

    #counterbalancepanel .fa-times-circle {
        color: #ff006e;
    }

    #counterbalancepanel .fa-check {
        color: #8fc400;
    }

    #counterbalancepanel .cc_bal_tbl {
        width: 100%;
    }

        #counterbalancepanel .cc_bal_tbl td {
            padding: 5px 10px;
            font-size: 11px;
            margin-bottom: 5px;
            padding-right: 3px;
            vertical-align: middle;
        }

        #counterbalancepanel .cc_bal_tbl thead td {
            text-align: center;
            font-weight: 600;
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
        }

        #counterbalancepanel .cc_bal_tbl tbody td {
            text-align: right;
        }

            #counterbalancepanel .cc_bal_tbl tbody td:first-child {
                text-align: left;
                padding-left: 3px;
            }

        #counterbalancepanel .cc_bal_tbl img {
            max-width: 35px;
            display: inline-block;
        }

        #counterbalancepanel .cc_bal_tbl .name {
            display: inline-block;
            padding-left: 5px;
            font-weight: 600;
        }
/*========================================================================
view transaction
==========================================================================*/
.viewtransaction .viewcmd .btncontrol .btn {
    width: 100%;
}

.viewtransaction .viewcmd .select_paramater {
    text-align: left;
}

    .viewtransaction .viewcmd .select_paramater input, .viewtransaction .viewcmd .select_paramater select {
        max-width: 100%;
        display: inline-block;
        margin-bottom: 3px;
    }

.viewtransaction .datalist .txinfo {
    font-size: 12px;
}

.viewtransaction .datalist ul {
    width: 100%;
}

    .viewtransaction .datalist ul li {
        width: 100%;
        position: relative;
        margin-bottom: 5px;
        font-size: 11px;
    }

        .viewtransaction .datalist ul li .riskscore {
            font-size: 12px;
            font-weight: 600;
            max-width: 50px;
            text-align: center;
            margin: 10px auto 0 auto;
        }

        .viewtransaction .datalist ul li .list_tbl {
            border: 1px solid #ddd;
            width: 100%;
        }

            .viewtransaction .datalist ul li .list_tbl td {
                border: 1px solid #ddd;
                padding: 3px;
                text-align: center;
            }

            .viewtransaction .datalist ul li .list_tbl thead {
                font-weight: 600;
            }

        .viewtransaction .datalist ul li .tx_info_tbl {
            width: 100%;
        }

            .viewtransaction .datalist ul li .tx_info_tbl td:first-child {
                text-align: right;
                padding-right: 5px;
                font-weight: 600;
                width: 40%;
            }

            .viewtransaction .datalist ul li .tx_info_tbl td:last-child {
                text-align: left;
                padding-left: 5px;
                width: 60%;
            }

        .viewtransaction .datalist ul li .list_tbl td.totaltitle {
            text-align: right !important;
            padding-right: 5px;
        }

        .viewtransaction .datalist ul li .cus_info_panel {
            margin-bottom: 5px;
        }
/*========================================================================
viewbalance
==========================================================================*/
.viewbalance .balance_ul {
    width: 100%;
}

.viewbalance .btncontrol .btn {
    width: 100%;
}

.viewbalance .balance_ul .alert {
    margin-bottom: 5px;
}
/*========================================================================
view currency list
==========================================================================*/
.currencylist {
}

    .currencylist .list_cmd a {
        width: 100%;
        margin-top: 5px;
    }

    .currencylist .currencylist_tb {
        width: 100%;
        font-size: 12px;
    }

        .currencylist .currencylist_tb thead {
            font-weight: 600;
        }

            .currencylist .currencylist_tb thead td {
                padding: 5px 0;
            }

        .currencylist .currencylist_tb td {
            padding: 5px;
            vertical-align: middle;
        }

        .currencylist .currencylist_tb tbody tr {
            cursor: pointer;
        }

        .currencylist .currencylist_tb img {
            width: 50px;
            display: inline-block;
        }

        .currencylist .currencylist_tb .currencyinfo {
            display: inline-block;
            font-weight: 600;
            text-align: left;
            vertical-align: middle;
        }

            .currencylist .currencylist_tb .currencyinfo span {
                display: inline-block;
            }

        .currencylist .currencylist_tb .status span {
            font-weight: 600;
            font-size: 10px;
            display: block;
            text-align: left;
        }

            .currencylist .currencylist_tb .status span .fa {
                padding-right: 3px;
            }

        .currencylist .currencylist_tb .reverse {
            display: block;
        }

            .currencylist .currencylist_tb .reverse:before {
                content: '(';
            }

            .currencylist .currencylist_tb .reverse:after {
                content: ')';
            }
/*========================================================================
update curency
==========================================================================*/
#editcurrencypanel {
    font-size: 12px;
}

    #editcurrencypanel .p-btn {
        padding: 6px;
    }

#editboardpanel ul {
    width: 100%;
}

    #editboardpanel ul li {
        width: 49.5%;
        display: inline-block;
        margin-bottom: 5px;
    }
/*========================================================================
txdetails
==========================================================================*/
.txdetails {
    text-align: left;
    font-size: 12px;
}

    .txdetails .tx_cmd {
        text-align: left;
    }

        .txdetails .tx_cmd a {
            display: block;
            width: 100%;
            margin-bottom: 5px !important;
        }

    .txdetails .txinfo {
        text-align: left;
        padding: 15px;
    }

        .txdetails .txinfo table {
            width: 100%;
        }

            .txdetails .txinfo table td {
                width: 33.333%;
                vertical-align: top;
            }

                .txdetails .txinfo table td.salesstatus {
                    text-align: center;
                    font-size: 24px;
                    font-weight: 600;
                }

                    .txdetails .txinfo table td.salesstatus.active {
                        color: #8fc400;
                    }

                    .txdetails .txinfo table td.salesstatus.cancel {
                        color: #ff0000;
                    }

                    .txdetails .txinfo table td.salesstatus.pending {
                        color: #ff6a00;
                    }

        .txdetails .txinfo .rl_result {
            position: absolute;
            top: 15px;
            right: 15px;
            text-align: center;
        }

    .txdetails h4 {
        font-weight: 600;
        text-align: left;
    }

    .txdetails .tx_list {
        width: 100%;
    }

        .txdetails .tx_list table {
            width: 100%;
        }

            .txdetails .tx_list table td {
                padding: 8px;
                text-align: center;
            }

            .txdetails .tx_list table thead {
                background: rgba(0, 0, 0, 0.1);
                font-weight: 600;
            }

            .txdetails .tx_list table tbody td:last-child {
                text-align: right;
            }

            .txdetails .tx_list table tfoot .result_td {
                font-weight: 600;
                padding-right: 5px;
                text-align: right;
            }

            .txdetails .tx_list table tfoot td:last-child {
                text-align: right;
            }

    /* .txdetails .tx_customerinfo {
        text-align: left;
        vertical-align: top;
    }

        .txdetails .tx_customerinfo td {
            vertical-align: top;
            padding: 3px;
        }

            .txdetails .tx_customerinfo td:first-child {
                width: 40%;
                text-align: left;
            }

            .txdetails .tx_customerinfo td:last-child {
                width: 60%;
                text-align: left;
            }*/

    .txdetails .tx_remarks {
        text-align: left;
    }

#canceltxpanel {
    width: 100%;
}

    #canceltxpanel select, #canceltxpanel input {
        width: 100%;
        margin: 10px 0;
    }
/*========================================================================
viewcustomer
==========================================================================*/
.viewcustomer .viewcmd h4 {
    margin-top: 0;
    font-weight: 600;
    text-align: left;
}

.viewcustomer .viewcmd .select_paramater {
    text-align: left;
}

    .viewcustomer .viewcmd .select_paramater .form-control {
        max-width: 200px;
        display: inline-block;
    }

.viewcustomer .viewcmd .select_small .form-control {
    max-width: 49%;
    display: inline-block;
}

.viewcustomer .viewcmd .btncontrol .btn {
    width: 100%;
    margin-bottom: 5px;
}

.viewcustomer .viewcmd .btn .words {
    padding-left: 5px;
}

.viewcustomer #datalist {
    font-size: 12px;
}

    .viewcustomer #datalist .riskscore {
        font-size: 12px;
        font-weight: 600;
        max-width: 50px;
        text-align: center;
        margin: 0 auto 0 auto;
    }

    .viewcustomer #datalist thead th {
        text-align: center;
        background-color: #f9f9f9;
        padding: 15px 0;
    }

    .viewcustomer #datalist td {
        text-align: center;
        vertical-align: middle;
    }

    .viewcustomer #datalist tbody td {
        cursor: pointer;
    }

    .viewcustomer #datalist tbody tr.danger td {
        font-weight: 600;
        color: #ff0000;
    }

    .viewcustomer #datalist td:first-child {
        text-align: center;
        width: 10%;
    }

    .viewcustomer #datalist td:nth-child(2) {
        text-align: left;
        width: 18%;
    }

    .viewcustomer #datalist td:nth-child(3) {
        text-align: left;
        width: 32%;
    }

    .viewcustomer #datalist td:nth-child(4) {
        text-align: left;
        width: 20%;
    }

    .viewcustomer #datalist td:nth-child(5) {
        text-align: center;
        width: 10%;
    }

    .viewcustomer #datalist td:last-child {
        text-align: center;
        width: 10%;
    }

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .viewcustomer .viewcmd .select_small .form-control {
        max-width: 48.5%;
        display: inline-block;
    }
}

/*========================================================================
    customerpanel
==========================================================================*/
#customerpanel {
    width: 100%;
}

    #customerpanel .contentpanel {
        text-align: left;
    }

    #customerpanel .last_tx_tbl {
        width: 100%;
        border: 1px solid #ddd;
    }

        #customerpanel .last_tx_tbl thead {
            background: #efefef;
        }

        #customerpanel .last_tx_tbl th, #customerpanel .last_tx_tbl td {
            border: 1px solid #ddd;
            text-align: center;
            width: 20%;
            font-size: 12px;
            padding: 5px 0;
        }

            #customerpanel .last_tx_tbl td:first-child {
                text-align: left;
                padding-left: 5px;
            }

    #customerpanel .cmd_ul {
        width: 100%;
    }

        #customerpanel .cmd_ul li {
            display: inline-block;
        }

    #customerpanel .txlist_cmd {
        width: 100%;
    }

        #customerpanel .txlist_cmd .form-control {
            display: inline-block;
        }

        #customerpanel .txlist_cmd select {
            max-width: 150px;
        }

        #customerpanel .txlist_cmd input {
            max-width: 180px;
        }

    #customerpanel .remarks_ul {
        width: 100%;
    }

        #customerpanel .remarks_ul li {
            margin-bottom: 5px;
        }

            #customerpanel .remarks_ul li .deleteremark_css {
                position: absolute;
                top: 5px;
                right: 10px;
                color: rgba(0, 0, 0, 0.3);
            }

    #customerpanel .txlist_ul {
        width: 100%;
        font-size: 12px;
    }
/*========================================================================
transaction list
==========================================================================*/
.txlist_tbl {
    width: 100%;
    border: 1px solid #ddd;
}

    .txlist_tbl td {
        vertical-align: middle !important;
        border: 1px solid #ddd;
        text-align: center;
        font-size: 12px;
    }

        .txlist_tbl td .tx_info {
            font-style: italic;
            margin-left: 10px;
        }

        .txlist_tbl td hr {
            margin: 5px 0;
        }

    .txlist_tbl thead td {
        background: #efefef;
        font-weight: 600;
    }

    .txlist_tbl tbody td:first-child, .txlist_tbl tbody td:nth-child(3) {
        text-align: left;
        padding-left: 5px;
        vertical-align: top !important;
    }

    .txlist_tbl td:first-child {
        width: 25%;
    }

    .txlist_tbl td:nth-child(2) {
        width: 40%;
    }

    .txlist_tbl td:nth-child(3) {
        width: 25%;
    }

    .txlist_tbl td:nth-child(4) {
        width: 10%;
    }

    .txlist_tbl .tx_tbl {
        width: 100%;
        margin-bottom: 0;
        vertical-align: top !important;
    }

        .txlist_tbl .tx_tbl td {
            font-size: 11px;
            padding: 2px 0;
        }

            .txlist_tbl .tx_tbl td img {
                width: 25px;
                display: inline-block;
                margin-right: 3px;
            }

            .txlist_tbl .tx_tbl td:first-child {
                width: 20%;
                vertical-align: middle;
            }

            .txlist_tbl .tx_tbl td:nth-child(2) {
                width: 21%;
            }

            .txlist_tbl .tx_tbl td:nth-child(3) {
                width: 18%;
                vertical-align: middle !important;
                text-align: center !important;
            }

            .txlist_tbl .tx_tbl td:nth-child(4) {
                width: 21%;
                text-align: right;
                padding-right: 3px;
            }

        .txlist_tbl .tx_tbl thead td:nth-child(4) {
            text-align: center;
        }

    .txlist_tbl tbody tr {
        cursor: pointer;
    }

    .txlist_tbl td .riskscore {
        font-weight: 600;
        display: block;
        width: 50px;
        margin: 5px auto 0 auto;
    }

    .txlist_tbl .tx_tbl tr.summary td:first-child {
        text-align: right;
        padding-right: 5px;
        font-weight: 600;
    }

    .txlist_tbl .tx_tbl tr.summary td:last-child {
        text-align: right;
        padding-right: 3px;
    }
/*========================================================================
balance_tbl
==========================================================================*/
.balance_tbl {
    width: 100%;
    border: 1px solid #ddd;
}

    .balance_tbl thead .thead td {
        background: #efefef;
        font-weight: 600;
        text-align: center !important;
    }

    .balance_tbl thead .startbalance td:first-child {
        text-align: left;
        font-weight: 600;
    }

    .balance_tbl thead .startbalance td:nth-child(2) {
        text-align: right;
    }

    .balance_tbl td {
        text-align: center;
        font-size: 12px;
        vertical-align: middle !important;
    }

        .balance_tbl td:first-child {
            width: 22%;
        }

        .balance_tbl td:nth-child(2) {
            width: 22%;
        }

        .balance_tbl td:nth-child(3) {
            text-align: right;
            padding-right: 5px;
            width: 14%;
        }

        .balance_tbl td:nth-child(4) {
            text-align: right;
            padding-right: 5px;
            width: 14%;
        }

        .balance_tbl td:nth-child(5) {
            text-align: right;
            padding-right: 5px;
            width: 14%;
        }

        .balance_tbl td:nth-child(6) {
            width: 14%;
        }

    .balance_tbl tbody tr {
        cursor: pointer;
    }
/*========================================================================
mainpanel
==========================================================================*/
.mainpanel #summary_div img {
    width: 80px;
}

.mainpanel h3 {
    font-weight: 600;
    text-align: left;
    margin-top: 0;
}

    .mainpanel h3 img {
        width: 30px !important;
        margin-right: 5px;
    }

.mainpanel #summary_div .content {
    text-align: left;
    margin-top: 15px;
}

.mainpanel #summary_div .row {
    margin-bottom: 20px;
}

.mainpanel #summary_div .btn {
    width: 130px;
    float: right;
    margin-top: 0;
}

.mainpanel #summary_div .request_ul {
    width: 100%;
}

    .mainpanel #summary_div .request_ul li {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
    }

        .mainpanel #summary_div .request_ul li .alert {
            float: none;
            width: auto;
            padding: 15px;
            margin-bottom: 10px;
            position: relative;
        }

            .mainpanel #summary_div .request_ul li .alert .request_cmd {
                position: absolute;
                top: calc(50% - 20px);
                right: 5px;
            }

                .mainpanel #summary_div .request_ul li .alert .request_cmd a {
                    font-size: 14px;
                    width: auto;
                    margin-right: 3px;
                    float: none;
                }
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .mainpanel #summary_div .content {
        text-align: center;
    }

    .mainpanel #summary_div .btn {
        width: 130px;
        float: none;
        margin-top: 15px;
    }

    .mainpanel #summary_div .row {
        margin-bottom: 50px;
    }

    .mainpanel #summary_div .request_ul li {
        width: 100%;
        text-align: center;
    }

        .mainpanel #summary_div .request_ul li .alert .request_cmd {
            position: relative;
            top: 0;
            right: 0;
        }
}
/*========================================================================
    companydetails
==========================================================================*/
.companydetails h4 {
    font-weight: 600;
    text-align: left;
}

.companydetails .info-group {
    text-align: left !important;
}

.companydetails #branch_select {
    max-width: 200px;
    display: inline-block;
    float: right;
}
/*========================================================================================
    linetx_report
    ========================================================================================*/
#linetx_report .table-responsive {
    border: 1px solid #ddd;
    max-height: 800px;
}

#linetx_report #report_list table {
    border: 1px solid #ddd;
    width: 100%;
}

    #linetx_report #report_list table thead td {
        font-weight: 600;
        text-align: center;
    }

    #linetx_report #report_list table td {
        border: 1px solid #ddd;
        font-size: 12px;
    }
/*========================================================================================
    .viewcart
========================================================================================*/
.viewcart .cmd_ul {
    width: 100%;
}

    .viewcart .cmd_ul li {
        width: 100%;
        margin-bottom: 5px;
    }

        .viewcart .cmd_ul li a {
            width: 100%;
        }

.counter_tbl {
    width: 100%;
}

    .counter_tbl td {
        padding: 5px 10px;
        font-size: 12px;
        margin-bottom: 5px;
        padding-right: 3px;
        vertical-align: middle !important;
    }

    .counter_tbl thead td {
        text-align: center;
        font-weight: 600;
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
    }

    .counter_tbl tbody td {
        text-align: right;
        width: 12%;
    }

        .counter_tbl tbody td:first-child {
            text-align: left;
            padding-left: 3px;
            width: 28%;
        }

    .counter_tbl img {
        max-width: 50px;
        display: inline-block;
    }

    .counter_tbl .name {
        display: inline-block;
        padding-left: 5px;
        font-weight: 600;
    }

    .counter_tbl .list_tr {
        cursor: pointer;
    }

.viewcounter .cc_cmd {
}

    .viewcounter .cc_cmd a {
        width: 100%;
        margin-bottom: 5px;
    }

.viewcounter .fa-times-circle {
    color: #ff006e;
}

.viewcounter .fa-check {
    color: #8fc400;
}
/*==================================================================
viewtransferlistpanel
==================================================================*/
#viewtransferlistpanel .viewtranfer_tbl .viewtranfer_tbl_tr {
}

#viewtransferlistpanel .viewtranfer_tbl thead {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.16);
    text-align: center;
    color: #333;
}

#viewtransferlistpanel .viewtranfer_tbl td {
    width: 13%;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
}

    #viewtransferlistpanel .viewtranfer_tbl td img {
        width: 100%;
        max-width: 40px;
        margin-right: 5px;
    }

    #viewtransferlistpanel .viewtranfer_tbl td:nth-child(2) {
        width: 25%;
        text-align: left;
    }

#viewtransferlistpanel .viewtranfer_tbl .viewtranfer_tbl_tr td:last-child {
    width: 10%;
}

#viewtransferlistpanel .viewtranfer_tbl td .fa {
    font-size: 24px;
}
/*==================================================================
profile_menu
    ==================================================================*/
.profile_menu .btn {
    width: 100%;
    margin-bottom: 5px;
}

.profile_div .feature_cb {
    display: inline-block;
    text-align: left;
    width: auto;
}
/*==================================================================
change password panel
    ==================================================================*/
.showpanel {
    max-width: 300px;
    margin: 0 auto;
}

    .showpanel .form-control {
        margin-bottom: 10px;
    }

    .showpanel .panel_p {
        padding: 10px 0;
    }

.register_ul {
    width: 100%;
}

    .register_ul li {
        width: 100%;
        display: block;
        float: none;
    }

        .register_ul li:last-child {
            float: none;
        }

        .register_ul li a.btn {
            width: 100%;
        }
/* Larger than tablet */
@media (min-width: 550px) {
    .register_ul li {
        width: 50%;
        display: inline-block;
        float: left;
    }

        .register_ul li:last-child {
            text-align: right;
        }

        .register_ul li a.btn {
            width: 98%;
        }
}
/*==================================================================
staff list
    ==================================================================*/
#stafflist .stafflist_tbl {
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 10px;
}

    #stafflist .stafflist_tbl thead {
        font-weight: 600;
        background: rgba(0, 0, 0, 0.16);
        text-align: center;
        color: #333;
    }

    #stafflist .stafflist_tbl td {
        border: 1px solid #ddd;
        padding: 5px;
        font-size: 12px;
        text-align: center;
        width: 20%;
    }

    #stafflist .stafflist_tbl tbody tr {
        cursor: pointer;
    }

    #stafflist .stafflist_tbl td:last-child {
        width: 40%;
    }

    #stafflist .stafflist_tbl td .position_ul {
        width: 100%;
        text-align: left;
    }

        #stafflist .stafflist_tbl td .position_ul li {
            width: auto;
            padding-right: 5px;
            display: inline-block;
            vertical-align: top;
        }

            #stafflist .stafflist_tbl td .position_ul li:after {
                content: ',';
            }

            #stafflist .stafflist_tbl td .position_ul li:last-child:after {
                content: '';
            }

.ncpanel .nc .logo {
    text-align: right;
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

    .ncpanel .nc .logo img {
        width: 150px;
    }

.nc .approval {
    font-size: 12px;
    margin-top: 10px;
    font-style: italic;
}

.successpanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
    visibility: hidden;
}

    .successpanel.is-visible {
        display: block;
        visibility: visible;
    }

    .successpanel .tick_id {
        position: relative;
        top: calc(40% - 60px);
        left: calc(50% - 60px);
    }

    .successpanel .flatbtn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        vertical-align: middle;
        color: #fff;
        background-color: #6496c8;
        border: none;
        display: inline-block;
        margin: 0 10px 0 0;
        padding: 10px 45px;
        font-size: 16px;
        line-height: 1.8;
        appearance: none;
        box-shadow: none;
        border-radius: 0;
        opacity: 0.75;
    }

        .successpanel .flatbtn:focus {
            outline: none
        }

        .successpanel .flatbtn div {
            text-align: center;
            vertical-align: middle;
        }

        .successpanel .flatbtn:hover,
        .successpanel .flatbtn.hover {
            opacity: 1;
        }

/*==================================================================
rbaresult
    ==================================================================*/
.rbaresult thead td {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 600;
    text-align: center;
}

.rbaresult tbody td {
    text-align: left;
}

    .rbaresult tbody td:first-child {
        background: rgba(0, 0, 0, 0.05);
        font-weight: 600;
    }

    .rbaresult tbody td.score {
        text-align: center;
    }

.rbaresult tfoot td {
    font-weight: 600;
    text-align: center;
}

    .rbaresult tfoot td:first-child {
        text-align: right;
    }
/*==================================================================
rbaresult
==================================================================*/
.basicinformation {
    position: relative;
}

    .basicinformation .float_message {
        position: absolute;
        top: 0;
        right: 10px;
        height: 100%;
    }

        .basicinformation .float_message .risklevel {
            margin-bottom: 5px;
        }
/*========================================================================
cartlist tx info
==========================================================================*/
.cartlist .tx_info .tx_info_details {
    width: 100%;
    text-align: left;
    font-size: 14px;
}

    .cartlist .tx_info .tx_info_details p {
        padding-left: 5px;
    }
/*========================================================================
ecdd
==========================================================================*/
.ecdd_info {
    width: 100%;
    padding: 25px;
}

    .ecdd_info h3, .ecdd_info h4, .ecdd_info h5 {
        font-weight: 600;
    }

    .ecdd_info table.ecdd_tbl thead {
        background: rgba(0, 0, 0, 0.05);
    }

    .ecdd_info table.ecdd_tbl tbody td {
        width: 30%;
        text-align: left;
    }

        .ecdd_info table.ecdd_tbl tbody td:first-child, .ecdd_info table.ecdd_tbl tbody td:nth-child(3) {
            width: 20%;
            text-align: left;
            background: rgba(0, 0, 0, 0.05);
            font-weight: 600;
        }


    .ecdd_info table.txlist thead {
        font-weight: 600;
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
    }

    .ecdd_info table.txlist tbody td {
        width: 20%;
        text-align: center;
        vertical-align: middle;
    }

    .ecdd_info table.txlist tbody td {
        font-weight: 600;
    }

        .ecdd_info table.txlist tbody td:last-child {
            text-align: right;
        }

    .ecdd_info table.txlist tfoot td:last-child {
        text-align: right;
    }

    .ecdd_info .pasttx_tbl thead {
        font-weight: 600;
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
    }

    .ecdd_info .pasttx_tbl td {
        text-align: center;
        width: 20%;
    }

        .ecdd_info .pasttx_tbl td:first-child {
            text-align: center;
            width: 20%;
            background: rgba(0, 0, 0, 0.05);
            font-weight: 600;
        }

    .ecdd_info .pasttx_tbl tfoot td {
        text-align: left;
    }

.ocrp_cpy_info {
    width: 100%;
    border-bottom: 3px solid #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

    .ocrp_cpy_info table td {
        vertical-align: middle;
    }

        .ocrp_cpy_info table td img {
            width: 100%;
        }

        .ocrp_cpy_info table td:first-child {
            width: 18%;
        }

        .ocrp_cpy_info table td:last-child {
            width: 82%;
            padding-left: 10px;
        }

        .ocrp_cpy_info table td ul {
            width: 100%;
            text-align: left;
            padding-left: 0;
        }

            .ocrp_cpy_info table td ul li {
                text-align: left;
                width: auto;
                padding-right: 20px;
                display: inline-block;
            }

    .ocrp_cpy_info .cpy_name {
        font-weight: 600;
        font-size: 18px;
        display: inline-block;
    }

    .ocrp_cpy_info .cpy_no {
        font-weight: 600;
        font-size: 12px;
        padding-left: 5px;
        display: inline-block;
    }

    .ocrp_cpy_info .cpy_add {
        display: block;
    }

    .ocrp_cpy_info .cpy_licensetype {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .ocrp_cpy_info .cpy_licenseno {
        padding-left: 5px;
    }
/*========================================================================
system configuration
==========================================================================*/
.systemconfig h3, .systemconfig h4 {
    display: inline-block;
    font-weight: 600;
}

.systemconfig .leftmenu {
    text-align: left;
}

    .systemconfig .leftmenu ul.leftmenu_ul {
        width: 100%;
    }

        .systemconfig .leftmenu ul.leftmenu_ul li {
            width: 100%;
            padding: 10px;
        }

            .systemconfig .leftmenu ul.leftmenu_ul li:hover {
                background: rgba(0, 0, 0, 0.07);
            }

            .systemconfig .leftmenu ul.leftmenu_ul li.active {
                background: rgba(0, 0, 0, 0.07);
                font-weight: 600;
            }

            .systemconfig .leftmenu ul.leftmenu_ul li a {
                display: block;
                width: 100%;
                height: 100%;
            }

.systemconfig .addmode {
    max-width: 500px;
}

    .systemconfig .addmode .btn {
        width: 100px;
    }

.systemconfig .mode_list {
    width: 100%;
    padding: 10px 0px;
}

    .systemconfig .mode_list .mode_tbl {
        width: 100%;
    }

        .systemconfig .mode_list .mode_tbl thead {
            font-weight: 600;
            background: rgba(0, 0, 0, 0.07);
        }

            .systemconfig .mode_list .mode_tbl thead td {
                padding: 15px;
            }

        .systemconfig .mode_list .mode_tbl td:first-child {
            width: 80%;
        }

        .systemconfig .mode_list .mode_tbl td:last-child {
            width: 20%;
        }

        .systemconfig .mode_list .mode_tbl td {
            position: relative;
            vertical-align: middle;
        }

            .systemconfig .mode_list .mode_tbl td textarea {
                pointer-events: all;
                max-width: 80%;
                display: inline-block;
                text-align: left;
            }

                .systemconfig .mode_list .mode_tbl td textarea.disable {
                    pointer-events: none;
                    border: none;
                    box-shadow: none;
                    background: transparent;
                }

            .systemconfig .mode_list .mode_tbl td .mode_tbl_cmd {
                float: right;
            }

.systemconfig .index_ul {
    width: 100%;
}

    .systemconfig .index_ul li {
        width: 19.5%;
        display: inline-block;
    }

        .systemconfig .index_ul li .alert {
            padding: 50px 0;
            text-align: center;
            font-weight: 600;
        }

            .systemconfig .index_ul li .alert:hover {
                padding: 50px 0;
                text-align: center;
                font-weight: 600;
                -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
                -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
                box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
            }

.systemconfig .mode_list .mode_tbl td .row {
    margin-left: 0;
    margin-right: 0;
}

.systemconfig .mode_list .mode_tbl td .form-control {
    pointer-events: all;
    display: inline-block;
    text-align: left;
}

    .systemconfig .mode_list .mode_tbl td .form-control.disable {
        pointer-events: none;
        border: none;
        box-shadow: none;
        background: transparent;
    }

#CheckOutForm .tx_cmd a {
    margin-bottom: 5px !important;
}

.msbexpiry .danger {
    color: #ff0000;
    font-weight: 600;
}

.msbexpiry .warning {
    color: #f28704;
    font-weight: 600;
}

#msb02_report table {
    border: 1px solid #ddd;
    width: 100%;
}

    #msb02_report table thead td {
        font-weight: bold;
        background: #007fc8;
        color: #fff;
    }

    #msb02_report table td {
        border: 1px solid #ddd;
        text-align: center;
        font-size: 14px;
    }

#msb02_report .hasreport {
    color: #8fc400;
    font-weight: bold;
}
/*msb 02 old report*/
#msb02_report_old table {
    width: 100%;
    border: 1px solid #ddd;
}

    #msb02_report_old table td {
        border: 1px solid #ddd;
        text-align: right;
        font-size: 14px;
        padding: 3px 5px;
        vertical-align: middle;
        font-size: 13px;
    }

    #msb02_report_old table thead td {
        font-weight: bold;
        background: #007fc8;
        color: #fff;
        text-align: center;
    }

    #msb02_report_old table td.currency {
        text-align: left;
    }

        #msb02_report_old table td.currency img {
            width: 100%;
            max-width: 50px;
            display: inline-block;
        }

#msb02_report_old tfoot td {
    font-weight: bold;
}

#addupdateidpanel .alert {
    margin-bottom: 5px;
}

#addupdateidpanel .idlist td {
    position: relative;
}

#addupdateidpanel .idlist .removebtn {
    float: right;
    padding-right: 10px;
}

.reporttx table {
    font-size: 12px;
}

    .reporttx table thead td {
        background: #efefef;
        font-weight: 600;
    }

    .reporttx table td {
        text-align: center;
    }

        .reporttx table td img {
            width: 50px;
            display: inline-block;
        }

        .reporttx table td img {
            width: 50px;
            display: inline-block;
        }

        .reporttx table td .info {
            display: inline-block;
            margin-left: 5px;
        }

        .reporttx table td.text-left {
            text-align: left !important;
            width: 25%;
            font-weight: 600;
        }

    .reporttx table tfoot td {
        font-weight: 600;
    }

.reporttx .btncontrol {
    text-align: left;
}

    .reporttx .btncontrol .btn {
        display: inline-block;
    }
/*=======================================================================================
kyc check
=======================================================================================*/
.kyc_css {
    width: 100%;
}

    .kyc_css #request_tbl td:first-child {
        width: 30%;
        font-weight: 600;
    }

    .kyc_css #request_tbl td:last-child {
        width: 70%;
    }

    .kyc_css #result_tbl td {
        width: 25%;
    }

        .kyc_css #result_tbl td:last-child {
            width: 50%;
        }

    .kyc_css #result_tbl tr.match td {
        text-align: center;
        font-weight: 600;
    }

    .kyc_css #result_tbl td.td_header {
        background: #ededed;
    }

    .kyc_css .raminfo {
        margin-top: 10px;
        text-align: justify;
    }

        .kyc_css .raminfo b {
            text-align: center;
            display: block;
        }

    .kyc_css .ramlogo {
        margin-bottom: 10px;
    }

        .kyc_css .ramlogo div {
            float: right;
            font-weight: 600;
            text-align: right;
        }

    .kyc_css .header_title {
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 5px;
    }

mark {
    font-weight: 600;
}

.kyc_tbl thead td {
    background: #ededed;
}

/*countrymode*/
.countrymode td:first-child {
    width: 10% !important;
    text-align: center;
}

.countrymode td:nth-child(2) {
    width: 30%;
}

.countrymode td:nth-child(3) {
    width: 30%;
}

.countrymode td:nth-child(4) {
    width: 15%;
    text-align: center;
}

.countrymode td:last-child {
    width: 15%;
    text-align: center;
}

    .countrymode td:last-child .btn {
        margin: 0 auto;
    }

.mainpanel .addnews {
    float: right;
}

.news_ul {
    width: 100%;
}

.news_ul {
    width: 100%;
}

    .news_ul li {
        width: 100%;
        background: #fff;
        text-align: left;
        padding: 15px;
        font-size: 13px;
        border-bottom: 1px solid #ddd;
        position: relative;
    }

        .news_ul li:last-child {
            border-bottom: none;
        }

        .news_ul li .title {
            font-weight: 600;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .news_ul li p {
            margin-top: 3px;
        }

        .news_ul li .delete {
            position: absolute;
            top: 10px;
            right: 10px;
            color: rgba(0, 0, 0, 0.3);
        }

#newspanel .news_div {
    margin-top: 5px;
    margin-bottom: 3px;
}

    #newspanel .news_div textarea {
        height: 300px;
    }

    #newspanel .news_div select {
        width: 150px;
    }

.mainpanel .news_paging {
    width: 100%;
    height: 35px;
    margin-top: 5px;
    position: relative;
}

    .mainpanel .news_paging .news_arrow {
        border: 1px solid #e7e7e7;
        padding: 8px 12px;
        background-color: #007fc8;
        color: #fff;
        border-radius: 5px;
    }

    .mainpanel .news_paging .arrowleft {
        position: absolute;
        top: 0;
        left: 0;
    }

    .mainpanel .news_paging .arrowright {
        position: absolute;
        top: 0;
        right: 0;
    }

    .mainpanel .news_paging .newstotal {
        width: 100%;
        margin: 0 auto;
        font-weight: 600;
        font-size: 13px;
    }

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    border-top: 1px solid #e7e7e7;
    margin-top: 15px;
    padding-top: 15px;
    background-color: #f8f8f8;
}

.navbar #logout_timer {
    float: right;
    padding: 15px;
}

.checkid input {
    font-size: 30px;
    font-weight: 600;
    color: #48C2D6;
    height: 50px;
}
/*daily tx*/
.list-tbl {
    margin-top: 10px;
}

    .list-tbl thead th, .list-tbl tbody td {
        font-size: 85% !important;
        padding: 5px !important;
    }

        .list-tbl thead th:first-child, .list-tbl tbody td:first-child {
            width: 8%;
            text-align: center;
        }

        .list-tbl thead th:nth-child(2), .list-tbl tbody td:nth-child(2) {
            width: 12%;
            text-align: center;
        }

        .list-tbl thead th:nth-child(3), .list-tbl tbody td:nth-child(3) {
            width: 8%;
            text-align: center;
        }

        .list-tbl thead th:nth-child(4), .list-tbl tbody td:nth-child(4) {
            width: 8%;
            text-align: center;
        }

        .list-tbl thead th:nth-child(5), .list-tbl tbody td:nth-child(5) {
            width: 12%;
        }

        .list-tbl thead th:nth-child(6), .list-tbl tbody td:nth-child(6) {
            width: 7%;
            text-align: center;
        }

        .list-tbl thead th:nth-child(7), .list-tbl tbody td:nth-child(7) {
            width: 12%
        }

        .list-tbl thead th:nth-child(8), .list-tbl tbody td:nth-child(8) {
            width: 20%;
        }

        .list-tbl thead th:last-child, .list-tbl tbody td:last-child {
            width: 8%;
            text-align: center;
        }

.badge-danger {
    background: #d9534f;
}

.badge-warning {
    background: #ec971f;
}

.badge-success {
    background: #5cb85c;
}
/*==================================================================
report-currency
==================================================================*/
.report-currency .table-bordered img {
    max-width: 50px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.report-currency .table-bordered .info {
    display: inline-block;
    vertical-align: top;
}

.tb_header {
    font-weight: 600;
    font-size: 150%;
    text-align: center !important;
}

.report-linetx .table-bordered td {
    font-size: 11px;
}

.report-linetx .table-responsive {
    max-height: 800px;
}