#brand,.box-group-icon,.box-group>div,input
{
    vertical-align:middle
}

#notify,.group-item,input
{
    box-sizing:border-box
}

.box-group-icon,body,button
{
    line-height:1.5
}

#notify,.btn:hover
{
    box-shadow:inset 0 0 0 transparent,0 0 0 .1rem rgba(222, 246, 114, 0.972)
}

.input-group::after,.row::after
{
    content:"";clear:both
}

body
{
    font-family:'Droid Arabic Kufi';
    font-size:14px;
    font-weight:400;
    color:#ffc107;
    text-align:center;
    background-color:#0f395a;
    direction: rtl; /* to make interface is arbic - right to left if del make interface eng */
    margin:0

}

#brand,.modal-window header,.text-bold
{
    font-weight:100
}

.navbar-left a,.navbar-right a
{
    color:#ffc107;
    text-align:center;
    padding:14px 16px;
    transition:.30s;
    display:block;
    text-decoration:none
}

input
{
    margin:auto;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

.footer
{
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    background:rgb(209, 209, 209)
}

#notify,.navbar,.sidenav
{
    position:fixed
}


.plch-center::-webkit-input-placeholder
{
    text-align:center
}

.plch-center:-moz-placeholder
{
    text-align:center
}

::-webkit-scrollbar
{
    width:10px;
    height:10px
}

::-webkit-scrollbar-track
{
    background:#3a4149;
    border:1px solid #0f395a
}

::-webkit-scrollbar-thumb
{
    background:#b8890a;
    border:1px solid #444141
}

::-webkit-scrollbar-corner
{
    background:#fcfcfd
}

::-webkit-scrollbar-track-piece the
{
    background:#3a4149
}

::-webkit-resizer
{
    background:#3a4149
}

.navbar
{
    overflow:hidden;
    background-color:#0f395a;
    z-index:9;
    top:0;
    width:100%;
    height:50px;
    border-bottom:1px solid #ffca1b
}

.dropd,.ses
{
    border:none
}

.navbar-left a
{
    float:left;
    font-size:17px
}

.dropd,.navbar-right a,.ses
{
    font-size:14px
}

.navbar-right a
{
    float:right
}

.navbar a:hover
{
    color:#fff
}

.navbar-hover:hover
{
    background-color:#ece91a
}


.ses
{
    float: left;
    background-color:#0f395a;
    color:#ec9b18;
    height:30px
}

.dropd
{
    float:right;
    background-color:#343b41;
    color:#e4e7ea;
    border-radius:3px
}

.spa
{
    border-bottom:1px solid #23282c
}

.sidenav
{
    height:100%;
    width:0;
    z-index:9;
    top:0;
    right:0;
    background-color:#065464;
    overflow-x:hidden;
    margin-top:51px;
    border-left:1px solid #1176c4;
    transition:.5s;

}

.dropdown-btn,.sidenav a
{
    text-decoration:none;
    font-size:14px;
    color:#e4e7ea;
    display:block;
    border-bottom:1px solid #47a155;
    background-color:none;
    width:90%;
    text-align:right;  /* to make icon to right*/
    cursor:pointer;
    outline:0;
    transition:.5s;
    padding-right:10px;
    margin:5px 0 5px 5px
}

.sidenav i
{
    font-size:20px;
    margin-right:2px;
    padding:7px 0 7px 7px
}

.dropdown-btn:hover,.sidenav a:hover
{
    color:#0e0c0c;
    background-color:#f8df00d8;
    border-radius:0px
}

.active
{
    background:#dfc012ad;
    border-radius:0px
}

.dropdown-container
{
    display:none;
    transition:.5s
}

.dropdown-container i
{
    padding-left:20px
}

.menu-open
{
    display:block
}

#notify,#temp
{
    display:none
}

.fa-caret-down,.fa-caret-left
{
    float: left; /*to make the careat-icon drop to right side*/
    color:#f8df00d8
}

[class*=col-],[class*=input-group-]
{
    float:right
}

i.fa.fa-edit {
    color:#ffc107;

}

#notify
{
    background-color:rgba(58,65,73,.6);
    color:#ffffff;
    border:1px solid #eb1515;
    width:200px;
    left:50%;
    margin-left:-100px;
    padding:6px 8px 8px;
    text-align:center;
    border-radius:3px
}

.box,.card
{
    background-color:#065464
}

.bg-danger,.bg-info,.bg-primary,.bg-secondary,.bg-success,.bg-warning,.box,.box a
{
    color:#f3f4f5
}

.wraprer
{
    width:100%
}

#main
{
    transition:margin-right .5s;
    margin-top:55px
}

.main-container
{
    padding:5px 5px 5px 7px
}

#brand
{
    min-width:165px
}

#brand span
{
    font-size:18px;
    line-height:10%
}

.chart
{
    height:200px;
    margin:0 auto
}

.progress-bar,.progress-bar-blue,.progress-bar-red
{
    height:10px;
    max-width:100%
}

.box
{
    padding:10px;
    margin:5px;
    border-radius:0px
}

.box a
{
    text-decoration:none
}

.box h1,h3
{
    padding:0;
    margin:0
}

.box-bordered
{
    border:2px solid #63a1db
}

.box-group-icon,.btn
{
    border:1px solid transparent
}

.bmh-50
{
    min-height:50px
}

.bmh-55
{
    min-height:55px
}

.bmh-60
{
    min-height:60px
}

.bmh-65
{
    min-height:65px
}

.bmh-70
{
    min-height:70px
}

.bmh-75
{
    min-height:75px
}

.bmh-80
{
    min-height:80px
}

.bmh-85
{
    min-height:85px
}

.bmh-90
{
    min-height:90px
}

.bmh-95
{
    min-height:95px
}

.bmh-100
{
    min-height:100px
}

.box-group>div
{
    display:table-cell
}

.box-group-icon
{
    font-size:40px;
    display:inline-block;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    width:25%;
    user-select:none;
    padding:5px 10px;
    margin:5px;
    border-radius:5px
}


.box-group-area
{
    padding:5px
}

.login-box,.register-box
{
    width:400px;
    margin:10px auto;
    padding-top:10%
}

@media (max-width:576px)
{
    .login-box,.register-box
    {
        width:95%;
        margin-top:20px;
        padding-top:2%
    }

}

.settings
{
    width:66.66%;
    margin-top:5%;
    margin-left:auto;
    margin-right:auto
}

@media (max-width:750px)
{
    .settings
    {
        width:95%;
        margin-top:5px
    }

}

.card
{
    margin:5px;
    border-radius:3px;
    border:1px solid #38a5ff
}

.card a
{
    text-decoration:none
}

.card h3
{
    margin:0
}

.card-header
{
    padding:5px 10px;
    margin-bottom:5px;
    border-bottom:1px solid #1176C4;
    background-color:#0F395A;
    border-radius:2px 2px 0 0;
    text-align: right;
}

.card-body
{
    padding:5px 10px;
    margin-bottom:10px;
    text-align: right;
    
}

.card-footer a{padding:0 0 5px;margin-top:5px;min-height:20px}

.btn,.btn-login
{
    display:inline-block;
    user-select:none;
    padding:3px 10px;
    vertical-align:middle;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
    text-decoration:none
}

.overflow
{
    overflow-x:auto;
    overflow-y:auto;
    max-height:217vh
}

button
{
    text-decoration:none;
    display:inline-block;
    border:none;
    background-color:none;
    font-size:14px
}

.btn
{
    margin:5px;
    border-radius:0px
}

.btn-login:hover
{
    box-shadow:inset 0 0 0 transparent,0 0 0 .1rem rgb(31, 41, 61)
}

.btn-login:hover 
{
     background-color:black;
     transition: all 0.5s ease-out;
}

.form-control:focus,.group-item:focus
{ box-shadow:inset 0 0 0 transparent,0 0 0 .2rem rgba(0,123,255,.25)}

.btn-login
{
    border:1px solid transparent;
    border-radius:0px
}

.group-item,.table td,.table th
{
    padding:5px
}

[class*=bg-]
{
    text-decoration:none
}

.bg-primary
{
    background-color:#702731
}

.bg-secondary
{
    background-color:#73818f
}

.bg-success
{
    background-color:#72a737
}

.bg-info
{
    background-color:#63c2de
}

.bg-warning
{
    background-color:#fd6a26fa
}

.bg-danger
{
    background-color:#b43041
}

.bg-light
{
    background-color:#f3f4f5;
    color:#0f395a
}

.bg-blue,.bg-cyan,.bg-dark,.bg-green,.bg-indigo,.bg-orange,.bg-pink,.bg-purple,.bg-teal,.bg-yellow
{
    color:#f3f4f5
}

.bg-dark
{
    background-color:#0f395a
}

.bg-blue
{
    background-color:#8e234d
}

.bg-indigo
{
    background-color:#2d237d
}

.bg-purple
{
    background-color:#6f42c1
}

.bg-pink
{
    background-color:#e83e8c
}

.bg-red
{
    background-color:#b43041;
    color:#f3f4f5
}

.bg-ppp3
{
    background-color:#65077c;
    color:#f3f4f5
}

.bg-ppp2
{
    background-color:#377002;
    color:#f3f4f5
}

.bg-ppp1
{
    background-color:#6d0707;
    color:#f3f4f5
}

.bg-ppp4
{
    background-color:#691c1c;
    color:#f3f4f5
}

.bg-orange
{
    background-color:#f8cb00
}

.bg-yellow
{
    background-color:#ffc107
}

.bg-green
{
    background-color:#72a737
}

.bg-teal
{
    background-color:#20c997
}

.bg-cyan
{
    background-color:#17a2b8
}

.bg-white
{
    background-color:#fff;
    color:#0f395a
}

.bg-grey
{
    background-color:#73818f;
    color:#f3f4f5
}

.bg-grey-dark
{
    background-color:#0f395a;
    color:#f3f4f5
}

.bg-light-blue
{
    background-color:#63c2de;
    color:#f3f4f5
}

[class*=text-]
{
    text-decoration:none
}

.text-primary
{
    color:#20a8d8
}

.text-secondary
{
    color:#73818f
}

.text-success
{
    color:#72a737
}

.text-info
{
    color:#63c2de
}

.text-warning
{
    color:#ffc107
}

.text-danger
{
    color:#b43041
}

.text-light
{
    color:#f3f4f5
}

.text-dark
{
    color:#0f395a
}

.text-blue
{
    color:#20a8d8
}

.text-indigo
{
    color:#2d237d
}

.text-purple
{
    color:#6f42c1
}

.text-pink
{
    color:#e83e8c
}

.text-red
{
    color:#b43041
}

.text-orange
{
    color:#f8cb00
}

.text-yellow
{
    color:#ffc107
}

.text-green
{
    color:#72a737
}

.text-teal
{
    color:#20c997
}

.text-cyan
{
    color:#17a2b8
}

.text-white
{
    color:#fff
}

.text-grey
{
    color:#73818f
}

.text-grey-dark
{
    color:#0f395a
}

.text-light-blue
{
    color:#63c2de
}

.align-middle
{
    vertical-align:middle;
       
}

.text-center
{
    text-align:center
}


.text-right
{
    text-align:right
}

.text-left
{
    text-align:left
}

.text-nowrap
{
    white-space:nowrap
}

.row::after
{
    display:table
}

.col-1
{
    width:8.33%
}

.col-2
{
    width:16.66%
}

.col-3
{
    width:25%
}

.col-4
{
    width:33.33%
}

.col-5
{
    width:41.66%
}

.col-6
{
    width:50%
}

.col-7
{
    width:58.33%
}

.col-8
{
    width:66.66%
}

.col-9
{
    width:75%
}

.col-10
{
    width:83.33%
}

.col-11
{
    width:91.66%
}

.col-12
{
    width:100%
}

.w-1
{
    width:8.33%
}

.w-2
{
    width:16.66%
}

.w-3
{
    width:25%
}

.w-4
{
    width:33.33%
}

.w-5
{
    width:41.66%
}

.w-6
{
    width:50%
}

.w-7
{
    width:58.33%
}

.w-8
{
    width:66.66%
}

.w-9
{
    width:75%
}

.w-10
{
    width:83.33%
}

.w-11
{
    width:91.66%
}

.progress,.table,.w-12
{
    width:100%
}

.progress
{
    background-color:#0f395a;
    border-radius:5px
}

.progress-bar
{
    background-color:#f3f4f5;
    border-radius:5px
}

.progress-bar-blue
{
    background-color:#20a8d8;
    border-radius:5px
}
    
.progress-bar-red
{
    background-color:#b43041;
    border-radius:5px
}

.table
{
    border-collapse:collapse!important
}

.table td,a,th
{
    color:#f3f4f5;
    text-decoration:none;
    text-align: center;
}

.table-bordered td,.table-bordered th
{
    border:1px solid #0f395a!important
}

.table-hover:hover tbody tr:hover
{
    background-color:#343b41
}

.tscroll tbody
{
    display:block;
    overflow:auto;
    height:70vh
}

.tscroll thead
{
    position:relative;
    display:block
}

.input-group::after
{
    display:table
}

.form-control,.group-item
{
    display:block;
    font-size:14px;
    background-color:#0f395a;
    color:#f3f4f5
}

.input-group-1
{
    width:8.33%
}

.input-group-2
{
    width:16.66%
}

.input-group-3
{
    width:25%
}

.input-group-4
{
    width:33.33%
}

.input-group-5
{
    width:41.66%
}

.input-group-6
{
    width:50%
}

.input-group-7
{
    width:58.33%
}

.input-group-8
{
    width:66.66%
}

.input-group-9
{
    width:75%
}

.input-group-10
{
    width:83.33%
}

.input-group-11
{
    width:91.66%
}

.alert,.group-item,.input-group-12
{
    width:100%
}

.group-item
{
    border:1px solid #23282c;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

.group-item-l
{
    border-radius:3px 0 0 3px
}

.group-item-r
{
    border-radius:0 3px 3px 0
}

.group-item-md
{
    border-radius:none
}

.group-item:focus
{
    color:#f3f4f5;
    border-color:#80bdff;
    outline:0
}

.group-item::placeholder
{
    color:#aaa00f;
    opacity:1
}

.radius-l-3
{
    border-radius:0px 0 0 0px
}

.radius-r-3
{
    border-radius:0 3px 3px 0
}

.radius-b-3
{
    border-radius:0 0 3px 3px
}

.radius-3
{
    border-radius:3px
}

.radius-l-5
{
    border-radius:5px 0 0 5px
}

.radius-r-5
{
    border-radius:0 5px 5px 0
}

.radius-5
{
    border-radius:5px
}

.alert
{
    padding:5px 0;
    border-radius:3px
}

.pd-2
{
    padding:2px
}

.pd-2p5
{
    padding:2.5px
}

.pd-3
{
    padding:3px
}

.pd-3p5
{
    padding:3.5px
}

.pd-4
{
    padding:4px
}

.pd-4p5
{
    padding:4.5px
}

.pd-5
{
    padding:5px
}

.pd-5p5
{
    padding:5.5px
}

.pd-6
{
    padding:6px
}

.pd-7
{
    padding:7px
}

.pd-8
{
    padding:8px
}

.pd-9
{
    padding:9px
}

.pd-10
{
    padding:10px
}

.pd-t-2
{
    padding-top:2px
}

.pd-t-3
{
    padding-top:3px
}

.pd-t-4
{
    padding-top:4px
}

.pd-t-5
{
    padding-top:5px
}

.pd-t-6
{
    padding-top:6px
}

.pd-t-7
{
    padding-top:7px
}

.pd-t-8
{
    padding-top:8px
}

.pd-t-9
{
    padding-top:9px
}

.pd-t-10
{
    padding-top:10px
}

.pd-b-2
{
    padding-bottom:2px
}

.pd-b-3
{
    padding-bottom:3px
}

.pd-b-4
{
    padding-bottom:4px
}

.pd-b-5
{
    padding-bottom:5px
}

.pd-b-6
{
    padding-bottom:6px
}

.pd-b-7
{
    padding-bottom:7px
}

.pd-b-8
{
    padding-bottom:8px
}

.pd-b-9
{
    padding-bottom:9px
}

.pd-b-10
{
    padding-bottom:10px
}

.pd-r-2
{
    padding-right:2px
}

.pd-r-3
{
    padding-right:3px
}

.pd-r-4
{
    padding-right:4px
}

.pd-r-5
{
    padding-right:5px
}

.pd-r-6
{
    padding-right:6px
}

.pd-r-7
{
    padding-right:7px
}

.pd-r-8
{
    padding-right:8px
}

.pd-r-9
{
    padding-right:9px
}

.pd-r-10
{
    padding-right:10px
}

.pd-l-2
{
    padding-left:2px
}

.pd-l-3
{
    padding-left:3px
}

.pd-l-4
{
    padding-left:4px
}

.pd-l-5
{
    padding-left:5px
}

.pd-l-6
{
    padding-left:6px
}

.pd-l-7
{
    padding-left:7px
}

.pd-l-8
{
    padding-left:8px
}

.pd-l-9
{
    padding-left:9px
}

.pd-l-10
{
    padding-left:10px
}

.mr-a
{
    margin:auto
}

.mr-2
{
    margin:2px
}

.mr-3
{
    margin:3px
}

.mr-4
{
    margin:4px
}

.mr-5
{
    margin:5px
}

.mr-6
{
    margin:6px
}

.mr-7
{
    margin:7px
}

.mr-8
{
    margin:8px
}

.mr-9
{
    margin:9px
}

.mr-10
{
    margin:10px
}

.mr-t-2
{
    margin-top:2px
}

.mr-t-3
{
    margin-top:3px
}

.mr-t-4
{
    margin-top:4px
}

.mr-t-5
{
    margin-top:5px
}

.mr-t-6
{
    margin-top:6px
}

.mr-t-7
{
    margin-top:7px
}

.mr-t-8
{
    margin-top:8px
}

.mr-t-9
{
    margin-top:9px
}

.mr-t-10
{
    margin-top:10px
}

.mr-b-2
{
    margin-bottom:2px
}

.mr-b-3
{
    margin-bottom:3px
}

.mr-b-4
{
    margin-bottom:4px
}

.mr-b-5
{
    margin-bottom:5px
}

.mr-b-6
{
    margin-bottom:6px
}

.mr-b-7
{
    margin-bottom:7px
}

.mr-b-8
{
    margin-bottom:8px
}

.mr-b-9
{
    margin-bottom:9px
}

.mr-b-10
{
    margin-bottom:10px
}

.mr-r-2
{
    margin-right:2px
}

.mr-r-3
{
    margin-right:3px
}

.mr-r-4
{
    margin-right:4px
}

.mr-r-5
{
    margin-right:5px
}

.mr-r-6
{
    margin-right:6px
}

.mr-r-7
{
    margin-right:7px
}

.mr-r-8
{
    margin-right:8px
}

.mr-r-9
{
    margin-right:9px
}

.mr-r-10
{
    margin-right:10px
}

.mr-l-2
{
    margin-left:2px
}

.mr-l-3
{
    margin-left:3px
}

.mr-l-4
{
    margin-left:4px
}

.mr-l-5
{
    margin-left:5px
}

.mr-l-6
{
    margin-left:6px
}

.mr-l-7
{
    margin-left:7px
}

.mr-l-8
{
    margin-left:8px
}

.mr-l-9
{
    margin-left:9px
}

.mr-l-10
{
    margin-left:10px
}

.pointer
{
    cursor:pointer
}

.form-control
{
    width:100%;
    padding:5px;
    border:1px solid #0b2b50;
    border-radius:unset;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}

.form-control:focus
{
    color:#DCA512;
    border-color:#80bdff;
    outline:0;
    transition: .60s;
    
}

.form-control::placeholder
{
    color:#7c858f;
    opacity:1
}

.modal-window
{
    position:fixed;
    background-color:rgba(0,0,0,.15);
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999;
    opacity:0;
    pointer-events:none;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    transition:all .3s;
    border-radius:5px
}

.modal-window:target
{
    opacity:1;
    pointer-events:auto
}

.modal-window>div
{
    width:33.33%;
    position:relative;
    margin:10% auto;
    padding:1rem;
    background:#3a4149;
    color:#f3f4f5;
    border-radius:3px;
    border:1px solid #23282c
}

.modal-close
{
    color:#0f395a;
    line-height:25px;
    position:absolute;
    right:0;
    text-align:center;
    top:0;
    width:50px;
    text-decoration:none;
    background-color:#b43041;
    border-top-right-radius:3px;
    border-bottom-left-radius:3px
}

.modal-close:hover
{
    color:#fff
}

.modal-window h1
{
    font-size:150%;
    margin:0 0 15px
}

@media screen and (min-width:750px)
{.sidenav
    {
        width:210px
    }#main
    {
        margin-right:210px
    }
    #openNav,#shareWA
    {
        display:none
    }
    #closeNav
    {
        display:block
    }
}

@media screen and (max-width:750px)
{.sidenav
    {
        width:0;
        border-right:0
    }
    #brand,#closeNav,#cpage
    {
        display:none
    }
    #main
    {
        margin-left:0
    }
    #openNav
    {
        display:block
    }
    #shareWA
    {
        display:inline-block
    }
    .modal-window>div
    {
        width:80%
    }
    [class*=col-]
    {
        width:100%
    }
    .col-box-1
    {
        width:8.33%
    }
    .col-box-2
    {
        width:16.66%
    }
    .col-box-3
    {
        width:25%
    }
    .col-box-4
    {
        width:33.33%
    }
    .col-box-5
    {
        width:41.66%
    }
    .col-box-6
    {
        width:50%
    }
    .col-box-7
    {
        width:58.33%
    }
    .col-box-8
    {
        width:66.66%
    }
    .col-box-9
    {
        width:75%
    }
    .col-box-10
    {
        width:83.33%
    }
    .col-box-11
    {
        width:91.66%
    }
    .col-box-12
    {
        width:100%
    }
}


/*Roller*/
.lds-roller {
  display: inline-block;
  position: absolute;
  width: 64px;
  height: 64px;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px
  
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:  #ffc107;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*-----------------------*/

.cm-s-material.CodeMirror
{
    background-color:#263238;
    color:rgba(233,237,237,1)
}

.cm-s-material .CodeMirror-gutters
{
    background:#263238;
    color:#537f7e;
    border:none
}

.cm-s-material .CodeMirror-guttermarker,.cm-s-material .CodeMirror-guttermarker-subtle,.cm-s-material .CodeMirror-linenumber
{
    color:#537f7e
}

.cm-s-material .CodeMirror-cursor
{
    border-left:1px solid #f8f8f0
}

.cm-s-material div.CodeMirror-selected
{
    background:rgba(255,255,255,.15)}

.cm-s-material.CodeMirror-focused div.CodeMirror-selected
{
    background:rgba(255,255,255,.1)
}

.cm-s-material .CodeMirror-line::selection,.cm-s-material .CodeMirror-line>span::selection,.cm-s-material .CodeMirror-line>span>span::selection
{
    background:rgba(255,255,255,.1)
}

.cm-s-material .CodeMirror-line::-moz-selection,.cm-s-material .CodeMirror-line>span::-moz-selection,.cm-s-material .CodeMirror-line>span>span::-moz-selection
{
    background:rgba(255,255,255,.1)
}

.cm-s-material .CodeMirror-activeline-background
{
    background:rgba(0,0,0,0)
}

.cm-s-material .cm-keyword
{
    color:rgba(199,146,234,1)
}

.cm-s-material .cm-operator
{
    color:rgba(233,237,237,1)
}

.cm-s-material .cm-variable-2
{
    color:#80CBC4
}

.cm-s-material .cm-builtin
{
    color:#DECB6B
}

.cm-s-material .cm-atom,.cm-s-material .cm-number
{
    color:#F77669
}

.cm-s-material .cm-def
{
    color:rgba(233,237,237,1)
}

.cm-s-material .cm-string
{
    color:#C3E88D
}

.cm-s-material .cm-string-2
{
    color:#80CBC4
}

.cm-s-material .cm-comment
{
    color:#546E7A
}

.cm-s-material .cm-variable
{
    color:#82B1FF
}

.cm-s-material .cm-meta,.cm-s-material .cm-tag
{
    color:#80CBC4
}

.cm-s-material .cm-attribute
{
    color:#FFCB6B
}

.cm-s-material .cm-property
{
    color:#80CBAE
}

.cm-s-material .cm-qualifier,.cm-s-material .cm-type,.cm-s-material .cm-variable-3
{
    color:#DECB6B
}

.cm-s-material .cm-tag
{
    color:rgba(255,83,112,1)
}

.cm-s-material .cm-error
{
    color:rgba(255,255,255,1);
    background-color:#EC5F67
}

.cm-s-material .CodeMirror-matchingbracket
{
    text-decoration:underline;
    color:#fff!important
}

.table th {
    color:#ffc107;
}

.align-middle2
{
    vertical-align:middle;
    width: 5px;
    color: #ffc107;
}