﻿:root {
  --custom-color-1: #529fdd;
  --custom-color-2: #1379b1; 
  --custom-color-3: #529fdd44;
  --custom-color-4: rgba(0,0,0,0.15);
  --custom-color-5: #373232;
  --tags-color-1: #1d8fbf;
  --custom-green: #00cc98;
}

body {
    font-family: 'Assistant', serif;
    font-size:18px;
    direction:rtl;
    background:#fff;
    min-height: 650px;
    min-width: 320px;
}

html {
    position: relative;
    min-height: 90%;
    overflow-x: hidden;
    direction:rtl;
}

body > #all {
    height:auto;
    min-height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}

.center { text-align: center }

a { color:#000 }

p { direction:rtl; margin: 0 0 10px }

a:focus, a:hover { color: #fff; text-shadow: 0 0 1px #00000044; text-decoration: none;}

h1.homepage-title {
    font-size:25px;
    margin-bottom:5px;
    margin-top:-5px;
    text-align: center;
}

.minheightfix { min-height: 95vh }


.row { position:relative; margin-right: initial }

#HomepageSignupModal .modal-body { display: flex }
#HomepageSignupModal .modal-dialog { width: 480px }
#HomepageSignupModal .modal-content { width: auto;max-width: 100vw; }
#HomepageSignupModal h1 { color: var(--custom-color-2);border-bottom: 0px solid #b5071633;}

#HomepageSignupModal .modalTitle { margin: 0 0 20px 0 }

.alertpop > .modal-dialog { border: 0;border-radius:10px }

.container { padding-right: 10px; padding-left: 10px }

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/header4.webp);
    background-repeat: no-repeat;
    background-size: 100%;background-position: 0% -50px;
    margin-top: -18px;
}

input { border: 0; border-radius: 2px; padding-right: 3px; border-bottom: 1px solid rgba(0,0,0,0.15) }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 5px;
}

.navbar-inverse .navbar-toggle {border: none;margin-top: 28px;margin-right: 10px }
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color:transparent }

.navbar-toggle .icon-bar { width: 27px; height: 5px }

label { font-weight: normal }

.modal-title { padding: 10px 15px 0 0; min-height: 15px }

.error-message { margin: 0;color: #cd0000;font-weight: bold;}

.btn {
    color: #fff;
    background-color: var(--custom-color-2);
    border: 1px solid var(--custom-color-2);
    border-radius: 25px;
    font-size: 22px;
    padding: 6px 2.5vw;
    margin-bottom: 25px;
    margin-top: 10px;
    outline: 0 !important;
}

.btn:hover , .btn-default:hover { color: #fff; text-shadow: 0 0 5px #88ffff77 ; background-color: var(--custom-color-2); border:1px solid transparent }

.btn-default {
    margin-bottom: 0 !important;
}

button, html input[type=button], input[type=reset], input[type=submit] { outline: 0 }

.landing-header { height: 132px }
 
.landing-logo { width: 220px }

hr { border: none;
    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.15);
    height: 1px;
    margin: 0; }

h1 { font-size: 25px; font-weight: bold; }

.strip1 {
    height: 75px;
    background: var(--custom-color-2);
    bottom: 0;
    width: 100vw;
    padding-top: 15px;
    margin-top: 3em;
    position: absolute;
    bottom: -100px !important;
}

.strip1 a{
    color:#FFF;
}

.strip1 a:hover{
    text-decoration:underline;
}

.footer-links { font-size: 14px; color: #fff; text-align:center }

img { max-width:100%; height:auto }

.row_t { margin-bottom: 20px; margin-right: auto; margin-left: auto; text-align: right  }

.row_t1 { max-width:360px; margin-bottom:20px;  margin-left:auto }

.param { width: 94px; float: right; font-weight: bold; display: inline; font-size: 18px; text-align: right; color: #000; font-weight: 700; }

.opt { text-align: right; display: inline-block; width: 100%; }

.opt > select { min-height: 25px; border: 0; border-bottom: 1px solid rgba(0,0,0,0.15); height: 25px; background: #fff; width: 31.75%; }

input[type=checkbox], input[type='radio'] {
    width: 20px;
    height: 20px;
    margin: 2px 2px 0;
    accent-color: #158dd0 ;
}

.btnLogIn { color: #fff;
    background-color: var(--custom-color-2);
    border: 0;
    border-radius: 25px;
    font-size: 22px;
    padding: 10px 0;
    margin-top: 1em;
    outline: 0 !important;
    width: 75%; }

textarea::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder {
    color:#888;opacity:0.5;}

::placeholder {
    color:#888;opacity:0.5;}

.btn-landing1 {  
    background: rgb(255,48,25); 
    background: -moz-linear-gradient(to bottom, rgb(55, 132, 194) 0%,rgb(82, 159, 221) 55%,rgb(82, 159, 221) 98%);
    background: -webkit-linear-gradient(to bottom, rgb(55, 132, 194) 0%,rgb(82, 159, 221) 55%,rgb(82, 159, 221) 98%);
    background: linear-gradient(to bottom, rgb(55, 132, 194) 0%,rgb(82, 159, 221) 55%,rgb(82, 159, 221) 98%);
    font-size:25px;
    height:50px;
    width:85%;
    margin: 0 auto;
    border-radius:9px;
    padding:5px;
    border: 2px solid rgba(1,25,25,0.16);
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0,0,0,1);    
    animation-name: pulse;
    -webkit-animation-name: pulse;   
    animation-duration: 5.5s;   
    -webkit-animation-duration: 5.5s; 
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
  
.btn-landing1:hover { filter: brightness(108%);border:0 }

button.close { border-radius: 30px;  width: 32px; height: 32px; font-size: 26px; opacity: 1; text-align: center;
                line-height: 29px; position: absolute; top: 5px; left: 2px; font-weight: 100; z-index: 100;outline:0;
}

button.close:hover {
    color: #666;
    opacity: 1;
}

.modal-header {
    padding: 0;
    border: none;
    min-height: 1px;
}

.close {text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff }

h2 {font-size:21px; direction:rtl;  margin-bottom:0; float:right; font-weight: bold; width: 100%}

.alertpop {
    text-align: right;
}

.alertpop .modal-footer {
    text-align: left;
    padding: 10px 15px;
    border: none;
}

.alertpop .modal-content {
    background-color: #fff;
}

.alertpop .modal-header {
    padding-right: 15px;
    border-bottom: 1px solid #aaa;
    color: #cd0000;
}

.alertpop .btn { padding: 5px 4vw !important; float: left }

.modal-open {padding-right: 0 !important}

.cont_home { padding: 0 3px 2em 5px; min-height: 25vh }

.cont_home a { color: var(--custom-color-1)}

#logo_land {
    float:right;
    margin-right:0;
    margin-top:10px;
    width:220px;
}

#logo_land h1 {
    color:#FFF;
    font-size:20px;
    text-align:right;
    margin:0;
}

.land_left {
    border-radius: 9px;
    position: relative;
    top: -22px;
    width:390px;
    height:auto;
    background:#fff;
    margin-left:30px;
    direction:rtl;
    color:#000;
    padding:10px 10px;
    margin-bottom: 5px;
    animation-name: bounceInUp;
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important; 
    background: transparent;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.land_left select {
    width: 120px;
    text-align: center;
    border: 0;
    border-bottom: 1px solid #ccc;
    height: 30px;
    background: transparent;
}

.land_left input[type='text'], .land_left input[type='password'] { 
    border:0; border-bottom: 1px solid rgba(0,0,0,0.15); background: #f4f4f4; width: 100%; height: 34px 
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    from {opacity: 0; transform: translate3d(0, 3000px, 0); }
    60% { opacity: 1; transform: translate3d(0, -20px, 0); }
    75% { transform: translate3d(0, 10px, 0); }
    90% { transform: translate3d(0, -5px, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes pulse {
    0% {transform: scale(0.9);opacity: 0.9;}
    15% {transform: scale(1);opacity: 1;}   
    85% {transform: scale(1);opacity: 1;}
    100% {transform: scale(0.9);opacity: 0.9;}          
}

.btn-danger { background: var(--custom-color-2) !important;  }
.btn-danger:hover { background-color: var(--custom-color-1);border:1px solid transparent }
.btn-danger:active { border: 1px solid yellow }
.btn-danger:focus { border: 1px solid transparent }

.footer-copyright { color: #fff; text-align: left;font-size: 14px; padding: 0; margin: 0; }

.footer-copyright p { font-size: 14px; padding-top: 25px; }

/*landing page fixes */
.landing-spacer1 {
    height: 16vh;
}

.landing-spacer2 {
    display: block;margin-bottom: -35px;
}

.begin-button {
    position:relative; left: -25%;
    padding:10px;margin: 0 auto;background: rgba(255,255,255,0.93);border-radius:11px;width: 85%;
    box-shadow: 1px 1px 55px rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.66);
    max-width: 430px;
    animation-name: bounceInUp;
    animation-duration: 0.66s;
    -webkit-animation-duration: 0.66s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    height: min-content;
}

#contentMain_landinglevel1_divLevel2 {padding-top:11px}

.modal { overflow-y: auto }

.modal-body { max-height: calc(100vh - 100px);overflow-y: auto; padding: 10px }

.modalTitle { text-align:center }

input[type=text] , input[type=password] { background: transparent !important; outline: 0; width: 100% } 

select { outline:0; background: transparent }

.landing-header { display: none;
        }

#bgdiv {
    background-size: cover; background-position:70%; 
    background-repeat: no-repeat;
    margin-bottom: 0px; 
    position: relative; 
    padding-right: 20px;
    background-position:top;
}

.footer-links { position:relative; top: 11px }
.strip1 a { margin-left: 3px; margin-right: 3px }




@media only screen and (min-width: 1367px) {

}

@media only screen and (max-width: 1200px) {

}
    
@media only screen and (max-width : 992px) {
    
    .map_pic { left: -25%; }
    
}

@media (min-width: 768px) {
    
}

@media only screen and (max-width : 768px) {
    
    .footer-links {font-size: 18px }
    
    body,html { overflow-x: hidden }
    
    .begin-button { height: auto }
    
    #contentMain_contentMain_btnUpdate, #contentMain_btnSearch { width: calc(100% + 5px); margin: 20px 10px 60px 0; max-width: 89vw }
    
    .num_page { margin-bottom: 3.25em }
    
     #contentMain_alert_myModal > .modal-dialog { max-width: 100vw }
    
    .modal-sm { width: 100%; max-width: unset }
    
    button.close { font-weight: 300; font-size:40px }
    
    .container-fluid { 
        background-size: 240%;
        background-position: 49% 0;
        margin-top: 0;
    }
    
    .strip1 { height: 125px; position: absolute !important; padding: 10px 0 0 0; margin-top:1px}
    
    .begin-button {
        position:relative; left:0;
    }
    
    .footer-copyright { color: #fff; text-align: center; font-size: 14px; padding: 0.5em 0 0 0;
     border-top: 1px solid #ffffff88;}
    
    .footer-copyright p { padding-top: 5px }
        
    .land_left {
        background: -moz-linear-gradient(top, rgba(255,255,255,0.55) 0%, rgba(255,250,247,1) 51%, rgba(255,250,237,0.55) 100%); 
        background: -webkit-linear-gradient(top, rgba(255,255,255,0.55) 0%,rgba(255,250,247,1) 51%,rgba(255,250,237,0.55) 100%); 
        background: linear-gradient(to bottom, rgba(255,255,255,0.55) 0%,rgba(255,250,247,1) 51%,rgba(255,250,237,0.55) 100%); 
        width: 88%; min-height: 355px;
        padding: 0; margin: auto;
        font-size:80%;
        padding-top: 10px; padding-right: 5px;
        animation-name: fadeInUp;
        animation-duration: 2s; 
        -webkit-animation-duration: 2s;
        animation-timing-function: ease-out;    
        -webkit-animation-timing-function: ease-out;
        visibility: visible !important; 
    }

    #logo_land {
      float: none;
      margin: auto;
      margin-top: 10px;
    }

    h2{
        font-size:22px; direction:rtl; margin-bottom:-35px; float:right; width: 100%;
    }

}
    
/*--- Extra Small Devices, Phones -*/
@media only screen and (max-width : 480px) {
    
    .right_col_home2 { padding: 15px }
    
    .container-fluid { padding-left:0 ; padding-right:0 }	

    .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
         margin-right: 0; margin-left: 0; }
    
    .articlesPage { padding: 0 10px 0 0; margin-top: 0;}

    .opt{ max-width:100% }
    
    .param { width: 99% ;  }
    
    #contentMain_loginInner2_hdrMain1 { display:none !important }
    
    .bottomTitles h1, .bottomTitles h2, .bottomTitles h3, .bottomTitles h4, .bottomTitles h5, .bottomTitles h6 { margin : 13px 0 3px 0 !important ; padding: 10px 0px 0 0 !important; font-size: 22px !important; font-weight: 700 !important}	
    .cont_home { padding-top:0 }
    
    .container { padding: 0;margin: 0; }

    .navbar-toggle .icon-bar + .icon-bar { margin-top: 6px }
    .navbar-toggle .icon-bar { height: 3px }
    
    .landing-logo {
        width: 160px;
    }
    
    .textLanding {
        margin: -9px 10px 20px 10px;
    }
    
    .textLanding img {width: 312px; height: 57px }
    
    .landing-header {
        height: 90px;
        position: relative;
        top: 0;
        z-index: 10;
    }
    
    #logo_land h1 {
        font-size: 15px;
    }
    
    .begin-button { right: -10px; width: 90%; }
    
    .minheightfix {
        min-height: 620px;
        top: -35px;
    }
    
    .row_t2 { max-width:395px; margin-bottom:5px }
        
    .land_left {
        height:445px;
    }
    
    .strip1 {
        position: absolute;
        margin-top: initial;
        bottom: -15vh
    }
    
    .modal-dialog { margin: 0 }
    
    .footer-text { font-size: 12px; padding-top: 4px }   
    
    .bottomTitles h1, .bottomTitles h2, .bottomTitles h3, .bottomTitles h4, .bottomTitles h5, .bottomTitles h6 {
        margin: 0px 0 10px 0 !important;
        padding: 0 0 10px 0 !important;
        font-size: 19px !important;
        font-weight: 700 !important;
    }
    
    .cont_home h1 { font-size:25px }
    .cont_home h2 { padding-bottom: 10px; }
    
    .cont_home p { font-size:18px; }
        
    input[type=checkbox], input[type=radio] {
        margin: 0;
        margin-top: 2px;
        line-height: normal;
        width: 15px;
        height: 15px;
        position: relative;
        top: 3px;
    }
    
    h2 {
        font-size:22px;
        direction:rtl;
        margin-bottom:-15px;
        float:right; width:100%;
    }        
    
    .container-fluid { padding-left:0 ; padding-right:0 }	

    .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
         margin-right: 0; margin-left: 0; }
        
    .landing-spacer1 { height: 52vh }
        
    .opt { text-align:right; display: inline-block; padding-right: 0;line-height: inherit;}
    
    input[type=checkbox], input[type=radio] {
    margin: 2px 0;
    margin-top: 1px;
    line-height: normal;
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
    }
    
            
        
    body { margin-bottom: -10px !important }
    .footer-links { top: 1.1em; }
    
    .strip1 { height:115px !important; position: relative !important;top: 15px;padding-right: 15px }
    
    .strip1 a { left: -10px; position: relative; }
    
    .cont_home { padding-right: 15px }
    #bgdiv { background-size: 115% auto; background-repeat: no-repeat;
        margin-bottom: 0px; position: relative; padding-right: 20px;  }
    .container { padding: 0 1em 0 0 !important }
    .col-xs-12 { padding-right: 15px }
      
    
}

/*--- Extra Small Devices, Phones */
@media only screen and (max-width : 320px) {
    
    .strip1  { width: 110%; height: 130px; }
    
    .minheightfix {
        min-height: 620px;
    }

    .col-sm-offset-3 {margin-left: initial;}

}	

@media (orientation:landscape) {
    
    body {
        min-height: 530px;
        margin-bottom: 0;
    }
    
    .landing-spacer1 {
        height:5vh
    }
}

/*--fix for firefox displaying different textbox height */
@-moz-document url-prefix() { 
.fixh {
    height: 50px !important; margin-top: 8px; 
  }
}

.autocomplete {
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  width:220px;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
