/*
    Document   : style
    Created on : Oct 2, 2013, 5:20:25 PM
    Author     : Basim
    Description:
        Purpose of the stylesheet follows.
*/


@font-face {
    font-family:Libya-Guide-main;
    src:url('../fonts/Evolventa-Regular.ttf');
    src:url('../fonts/Evolventa-Regular.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:Libya-Guide-fallback;
    src:url('../fonts/Droid Arabic Kufi.ttf');
    src:url('../fonts/Droid Arabic Kufi.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

body {
    font-size: 14px;
}


.login-view .slogan {
    font-size: 30px;
}

.login-view .jui.button {
    font-size: 20px;
}

.login-view .jui.button svg{
    transform: rotateY(180deg);
}

.login-view .jui.button:hover svg{
    transform: rotateY(0deg);
}

.toolbar .title {
    font-size: 24px;
    font-weight: 400;
}

.label {
    font-weight: 400;
    font-size: 13px;
}

.toolbar .grid_title {
    font-size: 14px;
}

.jui.button.alternate {
    font-size:12px;
}

.jui.tabbar.tab{
    font-size: 0.9em;
}

.jui.button{
    font-size: 1em;
}

input {
    font-size: 1em;
}


/*
===============================================
 Error page styles start
===============================================
*/


.error .title{
    font-size: 35px;
    font-weight: 400;
    direction: ltr;
}

.error .text {
    font-size: 25px;
    direction: ltr;
}
/*
===============================================
 Error page styles end
===============================================
*/
/*
    Created on : Jul 24, 2015, 3:54:24 PM
    Author     : basem

    Note: Do NOT place any language-dependent styles in this file. If
    there are language-dependent styles such as font type, font size or
    orientation, place them in the language-specific css files (e.g.
    en.css or ar.css).
*/


*{
    font-family: Libya-Guide-main, Libya-Guide-fallback, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a:link {
    color: #AAA;
    text-decoration: none;
}
a:visited {
    color: #AAA;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #AAA;
}

.login-view{
    background-image: radial-gradient(#256BA6 0%, #1C5C93 9%, #114B7D 43%, #104A7B 91%);
}

.login-view .jui.button{
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    fill: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.9);
}

.login-view .jui.button:hover{
    background: rgba(255,255,255,0.1);
}

.login-view .jui.button:active{
    background: rgba(255,255,255,0.2);
}

.login-view .jui.button svg{
    transition: all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

.slogan {
    color: #fff;
    opacity: 0.8;
}


.loader {
    padding: 20px;
    /*background-color: rgba(0,0,0,0.6);*/
}

.toolbar .title {
    background: transparent;
    color: rgba(255,255,255,0.8);
}

.header-view {
    background: #104a7b;
}

.jui.list.navMenu tr{
    background: inherit;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.jui.list.navMenu tr:hover{
    background: rgba(44, 146, 193, 0.08);
}

.jui.list.navMenu tr.selected{
    background: rgba(44, 146, 193, 0.22);
}

.label {
    color: #555;
    margin-top: 10px;
    margin-bottom: 3px;
}

.jui.form .body{
    padding: 20px;
}

.jui.splitpanel .jui.splitter{
    background-color: #EFEFEF;
}

.jui.splitpanel .jui.splitter:hover{
    background-color: #D0E7F1;
}

.layout{
    background: #FFF;
}

.jui.loader .indicator{
    /*fill: #2C92C1;*/
    fill: #104A7B;
}

.jui.loader .indicator.white{
    fill: #fff;
}

.toolbar .grid_title {
    background: transparent;
    color: rgba(252,169,40,0.9);
    line-height: 17px;
}
*:focus {
    /*border:1px solid #2c92c1;*/
    border:1px solid #104A7B;
    box-shadow: 0px 0px 3px #104A7B;
    -webkit-box-shadow: 0px 0px 3px #104A7B;
    -moz-box-shadow: 0px 0px 3px #104A7B;

}

.jui.toolbar {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.jui.toolbar .jui.toolbutton:focus{
    background-color: rgba(255,255,255,0.4);
}

.jui.toolbar .jui.select{
    background-color: white;
}

.jui.tabbar {
    background-color: #E8E8E8;
}


.jui.iframe {
    border: 1px solid rgba(0,0,0,0.2);
}


/*
===============================================
 jUI.Button .button .alternate styles start
===============================================
*/
.jui.button.alternate {
    border-radius: 3px;
    border:1px solid #22AC62;
    padding: 8px 13px;
    color: #FFFFFF;
    background-color: #2AD278;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2AD278), to(#178F58));
    background-image: -webkit-linear-gradient(top, #2AD278, #178F58);
    background-image: -moz-linear-gradient(top, #2AD278, #178F58);
    background-image: -ms-linear-gradient(top, #2AD278, #178F58);
    background-image: -o-linear-gradient(top, #2AD278, #178F58);
    background-image: linear-gradient(to bottom, #2AD278, #178F58);
}

.jui.button.alternate:hover{
    border:1px solid #1A824A;
    background-color: #23B064;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#23B064), to(#0F623C));
    background-image: -webkit-linear-gradient(top, #23B064, #0F623C);
    background-image: -moz-linear-gradient(top, #23B064, #0F623C);
    background-image: -ms-linear-gradient(top, #23B064, #0F623C);
    background-image: -o-linear-gradient(top, #23B064, #0F623C);
    background-image: linear-gradient(to bottom, #23B064, #0F623C);
}

.jui.button.alternate:active  {
    border:1px solid #22AC62;
    background-color: #2AD278;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2AD278), to(#178F58));
    background-image: -webkit-linear-gradient(top, #2AD278, #178F58);
    background-image: -moz-linear-gradient(top, #2AD278, #178F58);
    background-image: -ms-linear-gradient(top, #2AD278, #178F58);
    background-image: -o-linear-gradient(top, #2AD278, #178F58);
    background-image: linear-gradient(to bottom, #2AD278, #178F58);
}
/*
===============================================
 jUI.Button .button .alternate styles end
===============================================
*/


.bold{
    font-weight: bold;
}

hr{
    border: none;
    height: 1px;
    color: #999;
    background-color: #999;
}

.title2{
    color: #012238;
    padding: 2px 2px;
}

.jui.select  .jui.text{
    width: 100%  !important;
}

.wrap{
    white-space: normal;
}

.jui.button.load-more,
.jui.button.load-more *{
    cursor: pointer;
}

.logoContainer{
    background: transparent url("../images/logo-32px.png") no-repeat;
}

.darkBG{
    background-color: #032D4F;
}

.statement_tbl table td{
    max-width: 500px;
    word-wrap: break-word;
    overflow: hidden;
}

.whiteLabel {
    color: #fff;
}


/*
===============================================
 Error page styles start
===============================================
*/

body.document {
    background: white;
    color: rgba(0,0,0,0.8);
    padding: 20px;
    width: 100%;
    height: 100%;
    font-size: 20px;
}

body.document p {
    line-height: 2em;
}

body.document ul li {
    margin-bottom: 10px;
}

body.error {
    background: #104a7b;
    color: rgba(255,255,255,0.8);
    margin: 0px;
    width: 100%;
    height: 100%;
}

.error .gpay-mini-logo {
    background: transparent url("../images/gpay-mini.svg") no-repeat;
    background-position: center center;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.02;

}

.error .container{
    position: absolute;
    left: calc(50% - 250px);
    top: 100px;
    width: 500px;
    text-align: center;
}

.error .gpay-logo {
    background: transparent url("../images/gpay-logo.png") no-repeat;
    background-position: center center;
    width: 100%;
    height: 200px;
}

.error .title{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.error .text {
    width: 100%;
    text-align: center;
}

.error .libyaguide-logo {
    background: transparent url("../images/libyaguide-logo.png") no-repeat;
    background-position: center center;
    width: 500px;
    height: 200px;
    position: fixed;
    bottom: 0px;
    left: calc(50% - 250px);
    opacity: 0.4;
}

.input-label {
    border:1px solid rgba(144, 162, 171, 0.29);
    border-radius: 4px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.1);
    min-height: 30px;
}

.userInfo-label{
    font-size: 20px;
    color: #104a7b;
    margin-top:0px;
}
.btn-withoutstyle{
     all: initial;
       all: revert;
}
.user-detiles .jui.grid{
    border: none
}
.addAuth-label{
    color:black;
    padding: 0px;
    margin: 0px;
    font-size: 15px;
    font-weight: bold;
}
.all-trans-lbl{
    font-size: 16px;  
}
.add-cashout-lbl{
    color:black;
    font-weight: bold; 
}
.ref-txtfield{
    border:1px solid rgb(3 16 22 / 91%);
    box-shadow: 0px 0px 3px rgb(3 16 22 / 91%);
    -webkit-box-shadow: 0 0 4px 1px #032d4f;
    -moz-box-shadow: 0px 0px 3px rgb(3 16 22 / 91%);
}

.SuccessChekingMessage{
    background-color: #adf2ad;
    color: darkgreen;
}

.failChekingMessage{
    background-color: #ffcbcb;
    color: red;
}
.text-link{
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    font-family: arial, sans-serif;
    /*input has OS specific font-family*/
    color: #1a5173;
    text-decoration: underline;
    cursor: pointer; 
}

.text-link:hover{
    border: none;
    color:#1a5173;
}

.icon-yellow path {
    fill: #fca928;
}

/*
===============================================
 Error page styles end
===============================================
*/

.info-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 1px !important;
    border: none !important;
}

.info-table th {
    background-color: #285c89;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    text-align: start;
}

.info-table td {
    padding: 5px 10px;
}

.info-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.jui.text.title {
    font-size: 30px;
}

.jui.text.subtitle {
    font-size: 18px;
}
.jui.text.bold {
    font-weight: bold;
}

.color-red {
    color: #af0000;
}

.color-green {
    color: green;
}

.color-blue {
    color: #104a7b;
}

.color-yellow {
    color: #fca928;
}

.color-orange {
    color: #fc8e28;
}

.dir-ltr {
    direction: ltr;
}

/* A FIELD reads in its own direction, not the page's.
   A username, password, e-mail or passport number is a Latin token, and in an
   Arabic (RTL) page the bidi algorithm reorders its neutrals ("_", ".", "@")
   and its digit runs. "a_7h_84" and "84_a_7h" then render pixel-identically,
   so what the operator types, what the field shows and what the server stores
   stop agreeing — and no Arabic screen can show the difference.
   `plaintext` takes the paragraph direction from the CONTENT, so a Latin value
   reads LTR and an Arabic one still reads RTL, while `direction` keeps driving
   alignment and the placeholder. It is a no-op for any field whose content
   already runs the same way as its page. */
.jui.textfield,
.jui.textarea,
.dir-auto {
    unicode-bidi: plaintext;
}

.dir-rtl {
    direction: rtl;
}

.badge {
    display: inline-block;
    padding: 7px 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #104a7b;
    border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
}

.badge.success {
    background-color: #28a745;
}

.badge.warning {
    background-color: #ffc107;
    color: #472800;
}

.badge.danger {
    background-color: #b11616;
}

.badge.info {
    background-color: #17a2b8;
}

.badge.small {
    font-size: 10px;
    padding: 3px 7px;
}

.badge.large {
    font-size: 14px;
    padding: 7px 15px;
}

.thumbnail {
    width: 40px;
    height: 40px;
    object-fit: contain;
    vertical-align: middle;
}


.info-block {
    border: 1px solid #fff;
}

.info-block.default {
    background: #285c89;
    color: white;
}

.info-block.highlight {
    background: #edb610;
    color: #470c0c;
}

.info-block.success {
    background: #40a79d;
    color: white;
}

.info-block.danger {
    background: #d9534f;
    color: white;
}