﻿/*body {background-color: #eff3f8;font-family: "Lato", sans-serif;}*/
/*transform: translate3d(0,0,0) !important;*/
.page-wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .page-wrapper .page-wrapper-row {
        width: 100%;
        display: table-row;
    }

    .page-wrapper .page-wrapper-middle {
        background: #eff3f8;
        width: 100%;
        display: table-cell;
        height: 100%;
    }

.page-container {
    clear: both;
}

.Box {
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    color: #555;
    background-color: #ffffff;
}

.LabelColor {
    color: #007efc !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 30px;
    padding: 15px;
}
.StepPadding18{padding:18px !important;}
/*START - CUSTOME DESIGN RADIO BUTTON*/
.CustRadio { /*position: relative;*/
    float: left;
    clear: left;
    display: block;
    padding-left: 30px;
    margin-bottom: 22px;
    line-height: 22px;
    font-size: 17px;
    color: #666;
    cursor: pointer;
    right: -33%;
    padding-right: 20px;
    word-wrap: break-word;
}

    .CustRadio:before {
        background: #fff;
        content: "";
        position: absolute;
        display: inline-block;
        top: 5px;
        left: 15px;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
    }

input[type="radio"] {
    display: none !important;
}

    input[type="radio"]:checked + label:before {
        content: "\2022";
        text-align: center;
        line-height: 15px;
        font-family: Tahoma;
        font-size: 24px;
    }
/*END - CUSTOME DESIGN RADIO BUTTON*/
/*START - CUSTOME DESIGN CHECKBOX BUTTON*/
.CheckboxCustom {
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    display: inline-block !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: 0 !important;
}

    .CheckboxCustom:after {
        content: '';
        position: absolute;
        display: block;
        z-index: 1;
        width: 16px;
        height: 16px;
        border: 2px solid #007efc;
        border-radius: 2px;
    }

    .CheckboxCustom[type=checkbox]:before {
        background: #007efc url("../../contents/images/Check.png");
        background-size: 10px 8px;
        background-repeat: no-repeat;
        background-position: 1px 2px;
        position: absolute;
        left: 2px;
        z-index: 2;
        opacity: 0;
        width: 100%;
        height: 90%;
        color: #007efc;
    }

    .CheckboxCustom[type=checkbox]:checked:before {
        content: '';
        position: absolute;
        top: 0px;
        opacity: 1;
        left: 0px;
        border: 2px solid #007efc;
        border-radius: 2px;
    }
/*END - CUSTOME DESIGN CHECKBOX BUTTON*/
.page-header .page-header-menu.fixed {
    box-shadow: none;
}

.show-xs {
    display: none !important;
}

.CustPaddInfo {
    padding: 4px 11px !important;
}

.lblOR {
    font-size: 18px;
    color: #444 !important;
    font-weight: normal !important;
}

.fancy {
    line-height: 0.5;
}

    .fancy span {
        display: inline-block;
        position: relative;
    }

        .fancy span:before {
            right: 100%;
            margin-right: 15px;
        }

        .fancy span:after {
            left: 100%;
            margin-left: 15px;
        }

        .fancy span:before, .fancy span:after {
            content: "";
            position: absolute;
            height: 5px;
            border-bottom: 2px solid rgba(0, 0, 0, 0.13);
            width: 320px;
        }

.FixedFirstColumn tr:nth-child(even) {
    background-color: #f2f2f2;
}
/*tr:nth-child(odd) {background: #FFF}*/
.CursorNotAllowed {
    cursor: not-allowed !important;
}

.ClsLgnLogo {
    max-width: 80px;
}

.modal-content {
    border-radius: 20px !important;
}

.CustBorderBlack {
    border: 1px solid #222222;
}

.mt-checkbox > span:after {
    left: 5px;
    top: 1px;
}

.CustSideMenu {
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #dcdcdc;
    font-size: 18px;
}

    .CustSideMenu a:hover {
        text-decoration: none !important;
    }

.CustSideMenuInside {
    padding: 10px 0 0 0;
    font-size: 16px;
    margin-left: 20px;
    margin-bottom: 0;
}

    .CustSideMenuInside a:hover {
        text-decoration: none !important;
    }

.UpArow {
    content: url("../../contents/images/Down.png");
    margin-top: 6px;
}

.DownArow {
    content: url("../../contents/images/Up.png");
    margin-top: 6px;
}

.PaddingLeft60 {
    padding-left: 60px;
}

.progress {
    margin-bottom: 0 !important;
}

.modal-xl {
    width: 1200px;
}

.FontWeight600 {
    font-weight: 600 !important;
}

.MarginTop7 {
    margin-top: 7px !important;
}

.CustMenuTitle {
    color: #585858 !important;
}

    .CustMenuTitle > a {
        color: #585858 !important;
    }

.CustHeaderSection {
    height: 64px;
    background-color: #595a5c;
    color: #fff;
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    margin: 15px 15px 0 15px;
}

.CustBorderDown {
    border-bottom: 1px dashed #E7505A;
    /*border-top: 1px dashed #E7505A;*/
    margin: 0 !important;
    padding: 0 !important;
}


@media (max-width: 768px) {
    /*START - FIXED LAST COLUMN*/
    .FixedFirstColumn > thead > tr > th:first-child {
        position: absolute;
        display: inline-block;
        left: 15px;
        margin: 0 !important;
    }

    .FixedFirstColumn > tbody > tr > td:first-child {
        position: absolute;
        display: inline-block;
        left: 15px;
        margin: 0 !important;
        padding-bottom: 2px !important;
        background-color: #f5f5f5 !important;
    }

    .FixedFirstColumn > thead > tr > th:nth-child(2) {
        padding-left: 60px !important;
    }

    .FixedFirstColumn > tbody > tr > td:nth-child(2) {
        padding-left: 60px !important;
    }
    /*END - FIXED LAST COLUMN*/
    .HiddenTktSelection {
        display: none;
    }

    .HiddenPaxInfo {
        display: none;
    }

    .HiddenPayStatus {
        display: none;
    }

    .show-xs {
        display: none !important;
    }

    .RespMarginBottom10 {
        margin-bottom: 10px;
    }

    .RespTextCenter {
        text-align: center !important;
    }

    .RespTextLeft {
        text-align: left !important;
    }

    .RespTextRight {
        text-align: right !important;
    }

    .RespWidth100P {
        width: 100% !important;
    }

    .RespPaddRight0 {
        padding-right: 0 !important;
    }

    .RespPullLeft {
        float: left !important;
    }

    .RespPullRight {
        float: right !important;
    }

    .fancy span:before, .fancy span:after {
        content: "";
        position: absolute;
        height: 5px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.13);
        width: 130px;
    }

    .modal-xl {
        width: 95%;
    }

    .CustSideMenu {
        font-size: 16px;
    }

    .CustSideMenuInside {
        font-size: 16px;
    }

    .RspCustBorderTop {
        border-top: 1px solid #c2cad8;
    }

    .RspCustMenuTitle {
        font-weight: 600;
    }
    /*.RspCustMenuTitle>a{color: #ffffff !important;}*/
    div#myDropdown {
        left: -74px;
    }
}

@media (max-width: 480px) {
    /*START - FIXED LAST COLUMN*/
    .FixedFirstColumn > thead > tr > th:first-child {
        position: absolute;
        display: inline-block;
        left: 15px;
        margin: 0 !important;
    }

    .FixedFirstColumn > tbody > tr > td:first-child {
        position: absolute;
        display: inline-block;
        left: 15px;
        margin: 0 !important;
        padding-bottom: 2px !important;
        background-color: #f5f5f5 !important;
    }

    .FixedFirstColumn > thead > tr > th:nth-child(3) {
        padding-left: 50px !important;
    }

    .FixedFirstColumn > tbody > tr > td:nth-child(3) {
        padding-left: 50px !important;
    }
    /*END - FIXED LAST COLUMN*/
    .HiddenTktSelection {
        display: none;
    }

    .HiddenPaxInfo {
        display: none;
    }

    .HiddenPayStatus {
        display: none;
    }

    .Hiddenxs {
        display: none !important;
    }

    .show-xs {
        display: block !important;
    }

    .RespMarginBottom10 {
        margin-bottom: 10px;
    }

    .RespTextCenter {
        text-align: center !important;
    }

    .RespTextLeft {
        text-align: left !important;
    }

    .RespTextRight {
        text-align: right !important;
    }

    .RespWidth100P {
        width: 100% !important;
    }

    .RespPaddRight0 {
        padding-right: 0 !important;
    }

    .RespPullLeft {
        float: left !important;
    }

    .RespPullRight {
        float: right !important;
    }

    .fancy span:before, .fancy span:after {
        content: "";
        position: absolute;
        height: 5px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.13);
        width: 130px;
    }

    .modal-xl {
        width: 95%;
    }

    .CustSideMenu {
        font-size: 16px;
    }

    .CustSideMenuInside {
        font-size: 16px;
    }

    .RspCustBorderTop {
        border-top: 1px solid #c2cad8;
    }

    .RspCustMenuTitle {
        font-weight: 600;
    }
    /*.RspCustMenuTitle>a{color: #ffffff !important;}*/
    div#myDropdown {
        left: -74px;
    }
}

/*START - FOR TEMPLATE 1 DESIGN*/
.MinHeight35 {
    min-height: 35px !important;
}

.OuterCircle {
    padding: 0;
    margin: 0; /*float:left;*/
    margin-top: 25px;
    text-align: center;
}

    .OuterCircle > .InnerCircle {
        width: 1em;
        height: 1em;
        text-align: center;
        line-height: 1em;
        border-radius: 1em;
        margin: 0 1.2em;
        display: inline-block;
        position: relative;
        margin-left: 0;
    }

        .OuterCircle > .InnerCircle::before {
            content: '';
            position: absolute;
            top: 3px;
            left: -1.5em;
            width: 1.4em;
            height: 0.2em;
        }

        .OuterCircle > .InnerCircle:first-child::before {
            display: none;
        }

.OuterCirclePar {
    padding: 0;
    float: left;
    margin: 3px 10px 0 0;
}

    .OuterCirclePar > .InnerCirclePar {
        width: 1em;
        height: 1em;
        text-align: center;
        line-height: 1em;
        border-radius: 1em;
        margin: 0 1em;
        display: inline-block;
        position: relative;
        margin-left: 0;
    }

        .OuterCirclePar > .InnerCirclePar::before {
            content: '';
            position: absolute;
            top: 4px;
            left: -1.3em;
            width: 1.2em;
            height: 0.2em;
        }

        .OuterCirclePar > .InnerCirclePar:first-child::before {
            display: none;
        }

.CustBorderTitle {
    margin-bottom: 20px;
    border-bottom: 3px solid #505050;
}

    .CustBorderTitle > span > i.arrow {
        display: inline-block;
        font-size: 4px;
        width: 4em;
        height: 4em;
    }

        .CustBorderTitle > span > i.arrow.right {
            border-top: 5px solid #007efc;
            border-right: 5px solid #007efc;
            transform: rotate(42deg) skew(-3deg);
            border-radius: 5px;
            margin-right: 5px;
        }

        .CustBorderTitle > span > i.arrow.left {
            border-top: 5px solid #007efc;
            border-right: 5px solid #007efc;
            transform: rotate(224deg) skew(-3deg);
            border-radius: 5px;
            margin-left: 5px;
        }

.Custarrow {
    display: inline-block;
    font-size: 2.5px;
    width: 5em;
    height: 5em;
}

    .Custarrow.right {
        border-top: 4px solid #007efc;
        border-right: 4px solid #007efc;
        transform: rotate(42deg) skew(-3deg);
        border-radius: 4px;
        margin-right: 4px;
    }

    .Custarrow.left {
        border-top: 4px solid #007efc;
        border-right: 4px solid #007efc;
        transform: rotate(224deg) skew(-3deg);
        border-radius: 4px;
        margin-left: 4px;
    }

.CustBorderTitle > label > i.arrow {
    display: inline-block;
    font-size: 4px;
    width: 4em;
    height: 4em;
}

    .CustBorderTitle > label > i.arrow.right {
        border-top: 5px solid #007efc;
        border-right: 5px solid #007efc;
        transform: rotate(42deg) skew(-3deg);
        border-radius: 5px;
        margin-right: 5px;
    }

    .CustBorderTitle > label > i.arrow.left {
        border-top: 5px solid #007efc;
        border-right: 5px solid #007efc;
        transform: rotate(224deg) skew(-3deg);
        border-radius: 5px;
        margin-left: 5px;
    }

.CustBorderTopBlue {
    border-top: 1px solid #525e64;
}

.bootstrap-select.btn-group .dropdown-menu {
    margin-top: /*-34px;*/ -38px;
    border: 2px solid grey;
}

.btn-group > .dropdown-menu:before, .dropdown-toggle > .dropdown-menu:before, .dropdown > .dropdown-menu:before {
    display: none !important;
}

.btn-group > .dropdown-menu:after, .dropdown-toggle > .dropdown-menu:after, .dropdown > .dropdown-menu:after {
    display: none !important;
}

.bootstrap-select.btn-group .dropdown-toggle .caret {
    display: none !important;
}

.PosRelative {
    position: relative;
}

.SwapJourney {
    position: absolute;
    padding: 8px;
    border-radius: 50% !important;
    right: 20px;
    z-index: 1111;
    margin-top: 20px;
    cursor: pointer;
}

.TextBlueTime {
    color: #007efc !important;
}

.FontSize30 {
    font-size: 30px !important;
}

.FontSize40 {
    font-size: 40px !important;
}
/*.LineOnSidesTitle {width: 100%;text-align: left;border-bottom: 3px solid #505050;line-height: 0em;margin: 10px 0 30px 0;}*/
.LineOnSidesTitle span {
    padding: 0 20px 0 0;
}

.LineOnSides {
    width: 100%;
    text-align: center; /*line-height: 0em;*/
    margin: 10px 0 0px 0;
    padding-bottom: 3px;
}

    .LineOnSides span {
        padding: 0 5px;
    }

.TMBoxNormal {
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px; /*cursor: pointer;*/
    box-shadow: 0px 0px 5px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.2);
    overflow: hidden;
    white-space: initial;
}

.TMBoxActive { /*background-image: url('../images/CheckTicket.png');background-repeat: no-repeat;background-position-x: 5px;background-position-y: 5px;*/
    padding-top: 25px !important;
}

    .TMBoxActive::before {
        content: "\00a0";
        display: block;
        border-radius: 9px;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        height: 0;
        width: 0;
        position: absolute;
        left: 4px;
        top: 4px;
    }

    .TMBoxActive::after {
        content: "\00a0";
        display: block;
        width: 6px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        position: absolute;
        left: 9px;
        top: 7px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

.LineHeight1 {
    line-height: 1;
}

.TextGreenTime {
    color: #10BD59;
}

.ClasFastest {
    font-style: italic;
    color: #10BD59;
}

    .ClasFastest:before {
        content: "\f0c9";
        font-family: "FontAwesome";
        margin-right: 4px;
    }

    .ClasFastest:after {
        content: "\f0c9";
        font-family: "FontAwesome";
        margin-left: 4px;
    }

.ClsCheapest {
    font-style: italic;
    color: #ffffff;
    background-color: #2196f3;
    padding: 3px 20px;
    margin-bottom: 5px;
}

.TMBoxDisabled {
    pointer-events: none;
    opacity: 0.7;
}

    .TMBoxDisabled .LineOnSides span {
        padding: 0 5px;
    }

.SpnChngJrny, .SpnChngRtnJrny, .SpnChngRtnJrnyInChng, .SpnChngJrnyChangeOver, .SpnChngJrnyWeek, .SpnChngJrnyWeekChng {
    background-color: white;
    padding: 0px 5px;
    border-radius: 5px;
}

#CustTodayDP {
    background-color: #4b8df8;
    color: #ffffff !important;
}

    #CustTodayDP:hover {
        background-color: #4b8df8 !important;
        color: #ffffff !important;
    }

.CustCloseDP {
    background-color: #e7505a;
    color: #ffffff !important;
}

    .CustCloseDP:hover {
        background-color: #e7505a !important;
        color: #ffffff !important;
    }

@media (max-width: 768px) {
    .bootstrap-select.btn-group .dropdown-menu {
        margin-top: -34px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:before {
        top: -7px;
        display: none;
    }

    .datepicker-dropdown.datepicker-orient-bottom:after {
        top: -6px;
        display: none;
    }

    .table-condensed {
        width: 100%;
        border-collapse: separate;
        border-spacing: 2px; /*font-size: 18px;*/
    }

    .datepicker.dropdown-menu { /*top: 0 !important;*/
        left: 0 !important;
        width: 100%; /*height: 100%;*/
        z-index: 1111;
    }

    .SwapJourney {
        margin-top: 58px;
        right: 20px;
    }

    .RspNoPad {
        padding: 0 !important;
    }

    .RspFontSize12 {
        font-size: 12px !important;
    }

    .RspFontSize14 {
        font-size: 14px !important;
    }

    .RspFontSize16 {
        font-size: 16px !important;
    }

    .RspFontSize18 {
        font-size: 18px !important;
    }

    .RspFontSize20 {
        font-size: 20px !important;
    }

    .RspFontSize30 {
        font-size: 30px !important;
    }

    .LineOnSides {
        width: 40%;
        text-align: center; /*line-height: 0em;*/
        margin: 10px 0 0px 0;
        padding-bottom: 3px;
    }

        .LineOnSides span {
            padding: 0 5px;
        }

    .RespMarginTop10 {
        margin-top: 10px !important;
    }

    .RespMarginBottom5 {
        margin-bottom: 5px !important;
    }

    .TMBoxActive { /*background-image: url('../images/CheckTicket.png');background-repeat: no-repeat;background-position-x: 5px;background-position-y: 5px;*/
        padding-top: 25px !important;
    }

        .TMBoxActive::before {
            content: "\00a0";
            display: block;
            border-radius: 9px;
            -moz-border-radius: 9px;
            -webkit-border-radius: 9px;
            height: 0;
            width: 0;
            position: absolute;
            left: 4px;
            top: 4px;
        }

        .TMBoxActive::after {
            content: "\00a0";
            display: block;
            width: 6px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            position: absolute;
            left: 9px;
            top: 7px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
        }

    .form .form-body, .portlet-form .form-body {
        padding: 10px;
    }

    .RespMarginTopM10 {
        margin-top: -10px !important;
    }

    .CustBorderTitle {
        margin-bottom: 20px;
        border-bottom: 3px solid #505050;
    }

        .CustBorderTitle > span > i.arrow {
            display: inline-block;
            font-size: 2.5px;
            width: 4em;
            height: 4em;
        }

            .CustBorderTitle > span > i.arrow.right {
                border-top: 4px solid #007efc;
                border-right: 4px solid #007efc;
                transform: rotate(42deg) skew(-3deg);
                border-radius: 4px;
                margin-right: 4px;
            }

            .CustBorderTitle > span > i.arrow.left {
                border-top: 4px solid #007efc;
                border-right: 4px solid #007efc;
                transform: rotate(224deg) skew(-3deg);
                border-radius: 4px;
                margin-left: 4px;
            }

    .RspMarginTop0 {
        margin-top: 0 !important;
    }

    .Custarrow {
        display: inline-block;
        font-size: 2.5px;
        width: 4em;
        height: 4em;
    }

        .Custarrow.right {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(42deg) skew(-3deg);
            border-radius: 4px;
            margin-right: 4px;
        }

        .Custarrow.left {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(224deg) skew(-3deg);
            border-radius: 4px;
            margin-left: 4px;
        }

    .CustBorderTitle > label > i.arrow {
        display: inline-block;
        font-size: 2.5px;
        width: 4em;
        height: 4em;
    }

        .CustBorderTitle > label > i.arrow.right {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(42deg) skew(-3deg);
            border-radius: 4px;
            margin-right: 4px;
        }

        .CustBorderTitle > label > i.arrow.left {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(224deg) skew(-3deg);
            border-radius: 4px;
            margin-left: 4px;
        }

    .OuterCircle {
        padding: 0;
        margin: 2px 0 0 0; /*float:left;*/
        text-align: center;
    }

        .OuterCircle > .InnerCircle::before {
            content: '';
            position: absolute;
            top: 3px;
            left: -1.5em;
            width: 1.4em;
            height: 0.2em;
        }

    .OuterCirclePar {
        padding: 0;
        margin: 4px 5px 0 0; /*float:left;*/
        text-align: center;
    }

        .OuterCirclePar > .InnerCirclePar::before {
            content: '';
            position: absolute;
            top: 2px;
            left: -1.3em;
            width: 1.2em;
            height: 0.2em;
        }

    .dropdown-content {
        min-width: 100px !important;
    }

    .CustPaddingleft {
        padding: 0 15px !important;
    }
}

@media (max-width: 480px) {
    .bootstrap-select.btn-group .dropdown-menu {
        margin-top: -34px;
    }

    .SwapJourney {
        margin-top: 20px;
        right: 20px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:before {
        top: -7px;
        display: none;
    }

    .datepicker-dropdown.datepicker-orient-bottom:after {
        top: -6px;
        display: none;
    }

    .table-condensed {
        width: 100%;
        border-collapse: separate;
        border-spacing: 2px; /*font-size: 18px;*/
    }

    .datepicker.dropdown-menu { /*top: 0 !important;*/
        left: 0 !important;
        width: 100%; /*height: 100%;*/
        z-index: 1111;
    }

    .RspNoPad {
        padding: 0 !important;
    }

    .RspFontSize12 {
        font-size: 12px !important;
    }

    .RspFontSize14 {
        font-size: 14px !important;
    }

    .RspFontSize16 {
        font-size: 16px !important;
    }

    .RspFontSize18 {
        font-size: 18px !important;
    }

    .RspFontSize20 {
        font-size: 20px !important;
    }

    .RspFontSize30 {
        font-size: 30px !important;
    }

    .LineOnSides {
        width: 40%;
        text-align: center; /*line-height: 0em;*/
        margin: 10px 0 0px 0;
        padding-bottom: 3px;
    }

        .LineOnSides span {
            padding: 0 5px;
        }

    .RespMarginTop10 {
        margin-top: 10px !important;
    }

    .RespMarginBottom5 {
        margin-bottom: 5px !important;
    }

    .TMBoxActive { /*background-image: url('../images/CheckTicket.png');background-repeat: no-repeat;background-position-x: 5px;background-position-y: 5px;*/
        padding-top: 25px !important;
    }

        .TMBoxActive::before {
            content: "\00a0";
            display: block;
            border-radius: 9px;
            -moz-border-radius: 9px;
            -webkit-border-radius: 9px;
            height: 0;
            width: 0;
            position: absolute;
            left: 4px;
            top: 4px;
        }

        .TMBoxActive::after {
            content: "\00a0";
            display: block;
            width: 6px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            position: absolute;
            left: 9px;
            top: 7px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
        }

    .form .form-body, .portlet-form .form-body {
        padding: 10px;
    }

    .RespMarginTopM10 {
        margin-top: -10px !important;
    }

    .RespMarginTopM30 {
        margin-top: -30px !important;
    }

    .CustBorderTitle {
        margin-bottom: 20px;
        border-bottom: 3px solid #505050;
    }

        .CustBorderTitle > span > i.arrow {
            display: inline-block;
            font-size: 2.5px;
            width: 4em;
            height: 4em;
        }

            .CustBorderTitle > span > i.arrow.right {
                border-top: 4px solid #007efc;
                border-right: 4px solid #007efc;
                transform: rotate(42deg) skew(-3deg);
                border-radius: 4px;
                margin-right: 4px;
            }

            .CustBorderTitle > span > i.arrow.left {
                border-top: 4px solid #007efc;
                border-right: 4px solid #007efc;
                transform: rotate(224deg) skew(-3deg);
                border-radius: 4px;
                margin-left: 4px;
            }

    .RspMarginTop0 {
        margin-top: 0 !important;
    }

    .Custarrow {
        display: inline-block;
        font-size: 2.5px;
        width: 4em;
        height: 4em;
    }

        .Custarrow.right {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(42deg) skew(-3deg);
            border-radius: 4px;
            margin-right: 4px;
        }

        .Custarrow.left {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(224deg) skew(-3deg);
            border-radius: 4px;
            margin-left: 4px;
        }

    .CustBorderTitle > label > i.arrow {
        display: inline-block;
        font-size: 2.5px;
        width: 4em;
        height: 4em;
    }

        .CustBorderTitle > label > i.arrow.right {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(42deg) skew(-3deg);
            border-radius: 4px;
            margin-right: 4px;
        }

        .CustBorderTitle > label > i.arrow.left {
            border-top: 4px solid #007efc;
            border-right: 4px solid #007efc;
            transform: rotate(224deg) skew(-3deg);
            border-radius: 4px;
            margin-left: 4px;
        }

    .OuterCircle {
        padding: 0;
        margin: 2px 0 0 0; /*float:left;*/
        text-align: center;
    }

        .OuterCircle > .InnerCircle::before {
            content: '';
            position: absolute;
            top: 3px;
            left: -1.5em;
            width: 1.4em;
            height: 0.2em;
        }

    .OuterCirclePar {
        padding: 0;
        margin: 4px 5px 0 0; /*float:left;*/
        text-align: center;
    }

        .OuterCirclePar > .InnerCirclePar::before {
            content: '';
            position: absolute;
            top: 2px;
            left: -1.3em;
            width: 1.2em;
            height: 0.2em;
        }
}
/*END - FOR TEMPLATE 1 DESIGN*/

@media (max-width: 360px) {
    .CustResContainer {
        padding: 0 !important;
    }

    .CustWelcomeUser {
        margin: 10px 13px 10px 13px !important;
        display: flex;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 7px !important;
    }

    .CustResDropDown {
        position: absolute !important;
        left: 29px;
        top: 37px;
        z-index: 6;
    }

    .CustSideMenu {
        font-size: 16px;
    }

    .CustSideMenuInside {
        font-size: 16px;
    }

    .RspCustBorderTop {
        border-top: 1px solid #c2cad8;
    }

    .RspCustMenuTitle {
        font-weight: 600;
    }
    /*.RspCustMenuTitle>a{color: #ffffff !important;}*/
    .ResCustContainer {
        margin: 0 0px;
        width: 100%;
    }

    div#myDropdown {
        left: 78px;
    }

    .dropdown-content {
        min-width: 100px !important;
    }

    .CustPaddingleft {
        padding: 0 15px !important;
    }
}

@media (max-width: 320px) {
    .CustFontName {
        font-size: 17px;
    }

    div#myDropdown {
        left: 38px;
    }

    .ResCustContainer {
        margin: 0 0px;
        overflow: hidden;
    }
}

@media only screen and (min-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .col-md-8.col-xs-12.col-md-offset-2.WelcomeUser.CustWelcomeUser.CustResGraystrip {
        margin: 10px 0;
    }
    /*.ResCustContainer.CustJourneyContainer {margin: 0 13px;width: auto;display: inline-block;}*/
    .CustStepSmall {
        margin: 0 !important;
        font-size: 35px !important;
        display: inline-block !important;
        padding: 0 0 !important;
    }

    .CustFontResSize {
        font-size: 16px !important;
        display: inline-block !important;
        padding: 0 0 0 32px !important;
        vertical-align: super !important;
    }

    .col-md-12.col-xs-12.RespNoPadding {
        padding: 0;
    }

    .CustHeaderSection {
        height: 64px;
        background-color: #595a5c;
        color: #fff;
        padding: 10px;
        font-size: 18px;
        font-weight: 600;
        border-radius: 10px;
        margin: 15px 0 0 0;
    }

    .CustResGreenBtn {
        margin-bottom: 7px;
    }

    div#myDropdown {
        /*left: -74px;*/
    }

    .CircleWhite.JrDone:before {
        content: "✔";
        color: #ffffff;
        top: 3px;
        position: absolute;
        left: 67px !important;
    }

    .Line {
        border-right: 3px solid #4b77be;
        left: 72px !important;
        position: absolute;
        top: -25px;
        width: 1px;
        height: 30px;
    }
}

@media only screen and (min-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .CustStepSmall {
        margin: 0 !important;
        font-size: 32px !important;
        display: inline-block !important;
        padding: 0 0 !important;
    }

    .CustFontResSize {
        font-size: 15px !important;
        display: inline-block !important;
        padding: 0 0 0 32px !important;
        vertical-align: super !important;
    }

    .CircleWhite.JrDone:before {
        content: "✔";
        color: #ffffff;
        top: 3px;
        position: absolute;
        left: 90px !important;
    }

    .Line {
        border-right: 3px solid #4b77be;
        left: 95px !important;
        position: absolute;
        top: -25px;
        width: 1px;
        height: 30px;
    }
}
