@font-face {
    font-family: 'Yekan';
    src: url(../../fonts/Yekan.eot);
    src: url('../../fonts/Yekan.eot') format('embedded-opentype'), url('../../fonts/Yekan.woff') format('woff'), url('../../fonts/Yekan.ttf') format('truetype'), url('../../fonts/Yekan.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

/*Background color*/
body {
    /*background-color: #005b74;*/
    /*background-image: linear-gradient(120deg, #FF4081, #81D4FA);*/
    /*background-image: linear-gradient(120deg, #005b74, #81D4FA);*/
    direction: rtl;
    font-family: Yekan, Tahoma;
    text-align: right;
}

/*form styles*/
#msform {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

    #msform fieldset .form-card {
        background: white;
        border: 1px solid #ccc;
        border-radius: 0px;
        box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
        padding: 15px 20px 15px 20px;
        box-sizing: border-box;
        width: 94%;
        margin: 0 3% 20px 3%;
        /*stacking fieldsets above each other*/
        position: relative;
        text-align: right;
        color: black;
    }

    #msform fieldset {
        background: white;
        border: 0 none;
        border-radius: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding-bottom: 15px;
        /*stacking fieldsets above each other*/
        position: relative;
    }

        /*Hide all except first fieldset*/
        #msform fieldset:not(:first-of-type) {
            display: none;
        }

    #msform input[type="radio"] {
        font-family: Yekan, Tahoma;
        color: black;
        letter-spacing: 1px;
        font-weight: normal;
        line-height: 25px;
        margin-left: 5px;
        width: 15px;
        height: 15px;
    }


    #msform input[type="text"], #msform input[type="password"], #msform textarea {
        padding: 2px 5px 2px 5px;
        border: 2px solid #ccc;
        border-radius: 0px;
        margin-bottom: 3px;
        margin-top: 3px;
        width: 100%;
        box-sizing: border-box;
        color: #2C3E50;
    }


    #msform select {
        padding-right : 5px;
        padding-left: 5px;
        border: 2px solid #ccc;
        border-radius: 0px;
        margin-bottom: 3px;
        margin-top: 3px;
        width: 100%;
        box-sizing: border-box;
        color: #2C3E50;
    }

    #msform input:focus, #msform textarea:focus, #msform select:focus {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        font-weight: bold;
        border: 3px solid skyblue;
        outline-width: 0;
    }


    .fsRadio label {
        font-weight: bold !important;
    }

    .radio-toolbar input[type="radio"]:checked + label {
        background-color: #bbb;
    }

    /*Blue Buttons*/
    #msform .action-button {
        font-family: Yekan, Tahoma !important;
        width: 60%;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px;
        letter-spacing: 1px;
    }

.next1 {
    background-color: #005b74;
}

    #msform .action-button:hover, #msform .action-button:focus {
        box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue;
    }

    #msform .action-button-next {
        width: 100px;
        background: #008eff;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px;
        letter-spacing: 1px;
    }

    /*Previous Buttons*/
    #msform .action-button-previous {
        width: 100px;
        background: #828284;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px;
        letter-spacing: 1px;
    }

        #msform .action-button-previous:hover, #msform .action-button-previous:focus,
        #msform .action-button-next:focus, #msform .action-button-next:hover {
            box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
        }

    /*Dropdown List Exp Date*/
    select.list-dt {
        border: none;
        outline: 0;
        border-bottom: 1px solid #ccc;
        padding: 2px 5px 3px 5px;
        margin: 2px;
    }

        select.list-dt:focus {
            border-bottom: 2px solid skyblue;
        }

    /*The background card*/
    .card {
        z-index: 0;
        border: none;
        border-radius: 0.5rem;
        position: relative;
    }

    /*FieldSet headings*/
    .fs-title {
        color: #2C3E50;
        margin-bottom: 10px;
        font-weight: bold;
        text-align: right;
    }

    /*progressbar*/
    #progressbar {
        margin-bottom: 20px;
        overflow: hidden;
        color: lightgrey;
    }

        #progressbar .active {
            color: #000000;
        }

        #progressbar li {
            list-style-type: none;
            width: 20%;
            float: right;
            position: relative;
        }

    /*Icons in the ProgressBar*/
    #progressbar #introduction:before {
        font-family: FontAwesome;
        content: "\f0e8";
    }

    #progressbar #account:before {
        font-family: FontAwesome;
        content: "\f023";
    }

    #progressbar #personal:before {
        font-family: FontAwesome;
        content: "\f007";
    }

    #progressbar #payment:before {
        font-family: FontAwesome;
        content: "\f09d";
    }

    #progressbar #confirm:before {
        font-family: FontAwesome;
        content: "\f00c";
    }

    #progressbar li {
        text-align: center !important;
    }
        /*ProgressBar before any progress*/
        #progressbar li:before {
            width: 50px;
            height: 50px;
            line-height: 45px;
            display: block;
            color: #ffffff;
            background: lightgray;
            border-radius: 50%;
            margin: 0 auto 10px auto;
            /*padding-right: 15px;*/
        }

    /*ProgressBar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: -1;
    }

    /*Color number of the step and the connector before it*/
    #progressbar li.active:before, #progressbar li.active:after {
        background: skyblue;
    }

    /*Imaged Radio Buttons*/
    .radio-group {
        position: relative;
        margin-bottom: 25px;
    }

    .radio {
        display: inline-block;
        width: 204;
        height: 104;
        border-radius: 0;
        background: lightblue;
        box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        cursor: pointer;
        margin: 8px 2px;
    }

        .radio:hover {
            box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
        }

        .radio.selected {
            box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
        }

    /*Fit image in bootstrap div*/
    .fit-image {
        width: 100%;
        object-fit: cover;
    }

    #msaLogo {
        width: 20%;
        max-width: 100px;
    }

    #systemTitle {
        color: #005b74;
        font-weight: bold;
    }

    .desc {
        font-family: Yekan, Tahoma;
        font-weight: normal;
        text-align: justify;
        color: black;
        line-height: 25px;
        margin-bottom: 0.5rem !important;
    }

.redColor {
    color: red !important;
}

.darkOrangeColor {
    color: darkorange !important;
}
.blueColor {
    color: blue !important;
}

.greenColor {
    color: green !important;
}

.orangeColor {
    color: orangered !important;
}

.bold {
    font-weight: bold;
}

/*ul {*/
.checkStyle {
    list-style: none;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.checkStyle li {
    text-align: justify;
}

.checkStyle li:before {
    font-family: FontAwesome;
    content: "\f046";
    display: inline-block;
    width: 1.3em;
}

    .divs {
        margin-right: 15px !important;
        line-height: 1.7rem;
    }

    .redStar {
        color: red;
        font-family: Yekan, Tahoma;
        font-weight: bold;
    }

    .errorMsg {
        color: red !important;
    }

    .numbers {
        direction: ltr;
        text-align: left;
        letter-spacing: 1.2px;
    }

    .radioButtonList label {
        display: inline;
        margin-left: 45px !important;
        margin-right: 5px !important;
        font-weight: normal;
    }

    .p-rl-15 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .gridFirstRow {
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }

    .gridLastRow {
        /*margin-bottom: 10px;*/
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .gridRows {
        margin-right: 10px;
        margin-left: 10px;
        padding: 5px;
    }

    .bgLightGray {
        background-color: #e9e9e9;
    }

    .bgDarkGray {
        background-color: #e1e1e1;
    }

    .italic {
        font-style: italic !important;
    }

    .btn-gray {
        color: #fff;
        background-color: #5b6576;
        border-color: #5b6576;
    }

    .pr-25 {
        padding-right: 25px !important;
    }

.pr-30 {
    padding-right: 30px !important;
}

    .modalAlertMsg1 {
        margin: 0px;
        margin-bottom: 5px;
        font-weight: bold;
        text-align: justify;
    }

    .modalAlertMsg2 {
        margin: 0px;
        margin-right: 15px;
        margin-left: 15px;
        color: black;
        text-align: justify;
    }

.form-check-input {
    border: 0px !important;
    background-color: transparent !important;
    width: 1rem !important;
    height: 1rem !important;
}

.fontSize2Rem {
    font-size: 2rem !important;
}

.fontSize3Rem {
    font-size: 3rem !important;
}

.form-check-label {
    margin-right: 10px !important;
}

/*.validUsernameSpan {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: darkgreen;
}*/

/*.input-wrapper {
    display: inline-block;
    position: relative
}

    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f00c';
        position: absolute;
        right: 20px;
        top: 7px;
        color: green !important;
    }*/
/*.list-group {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;*/
    /*display: none !important;*/
/*}

.list-group-item {
    position: relative !important;
    display: inline !important;
    padding: 0.35rem !important;*/
    /*background-color: #fff;*/
    /*border: 1px solid rgba(0,0,0,.125) !important;
}*/

.marginRL10px {
    margin-right: 10px !important;
    margin-left: 10px !important
}