/* use  margin:auto;   to center div  */
/* @-ms-viewport  { width: device-width; } */

/****************************************************************************************************************/
/****************************HTML Element************************************************************************/
/****************************************************************************************************************/


input                          { color: #999999;border-radius: 5px;transition:all 1s;cursor: pointer;font-size: 16px;direction: rtl;border: 1px solid #1A87B9;padding: 11px;margin:4px; border-width: thin;font-family: Arial, Helvetica, sans-serif;}
input:focus                    { box-shadow: 0 0 10px 1px #cccccc;color: #999;background-color: #fffec8;}
input:hover                    { color: #333;background-color: #feff9e;}
input:disabled                 { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;}
input:hover                    { }

input[type=tel]                 { }
input[type=date]                { }
input[type=time]                { }
input[type=Password]:focus      { box-shadow: 0 0 20px 1px #cccccc; color: #333; }
input[type=number]:in-range     { border: 1px solid green;}
input[type=number]:out-of-range { border: 1px solid red;}
input[type=range]               { color: #999999;cursor: pointer;}
input[type=file]                { font-size: 20px;background: -webkit-linear-gradient(top,#fffbd0 0%,#fde7a6 100%);cursor:pointer;padding:11px;border-radius: 5px;margin:4px;border-width: thin;border: 1px dotted #f2bb30;transition:all 1s; }
input[type=file]:hover          { border-width: thin;border: 1px solid #bb8218; }
input[type=email]:invalid       { background: hsla(0, 90%, 70%, 1);}
input[type=email]:valid         { background-color: #f7f9de;}
input[type=radio]               { border: none; }
input[type=radio]:default       { color: #999;}
input[type=checkbox]            { border: none; transform:scale(1.5);}
input[type=checkbox]:checked    { color: #fff;}
input[type=url]                 { direction: ltr;}

input[type=submit]              { transition: all 0.5s;padding: 8px 12px;border: 1px solid #333;}
input[type=submit]:hover        { transform:scale(1.01);}
input[type=submit]:active       { transform:scale(1.2); }


img                             { border: 0px solid #666;padding: 0px;margin: 0px 0 0 0;}
img:focus                       { box-shadow: 0 0 20px 5px #eee; }
img:hover                       { cursor: pointer; }

select                          { color: #2f658a;border-radius: 5px;cursor: pointer;font-size: 16px;transition:all 1s; direction: rtl;border: 1px solid #1A87B9;padding:12px;margin:4px;border-width: thin;}
select:focus                    { color: #1f4864;background-color: #fffec8;}
select:hover                    { background-color: #fffec8;cursor: pointer;color: #666;}

textarea                        { color: #999999;border-radius: 5px;cursor: pointer;transition:all 1s;padding: 10px;margin:4px; direction: rtl;border: 1px solid #1A87B9;border-width: thin;}
textarea:focus                  { box-shadow: 0 0 20px 1px #586f1a; color: #333; }
textarea:hover                  { box-shadow: 0 0 20px 1px #999; color: #666;}

p:selection                    { color: #333333; background-color:#f0b66b;}

hr                              { background-image: -webkit-linear-gradient(left, transparent, #DBDBDB, transparent);background-image: linear-gradient(to right, transparent, #DBDBDB, transparent);border: 0;height: 1px;margin: 16px 0;}

table,td                        { font-size: 12px; color: #333; }
div                             { }




/****************************************************************************************************************/
/****************************  Styles ***************************************************************************/
/****************************************************************************************************************/

.trns            { background-color:transparent;border-color:transparent;padding:0px;margin:0px; border-width: 0;color: #2f658a;}
.inpt            { width:282px;height: 50px;  }    /*all the usual input width dinamic with mobile */

.circle          { border-radius: 50%; padding:5px; border:1px dotted #ccc;}

.list            { width:98%;max-width:900px;margin: auto; text-align: right;padding: 10px;}

.tdS             { display: flex;flex-direction:row; flex-wrap:wrap; justify-content: center; }
.tdF             { display: flex;flex-direction:row; flex-wrap:wrap; justify-content:flex-start; }
.flx             { display: flex;flex-direction:row; align-items:baseline;  }

.HD              {cursor: pointer;}

.ENG             {direction: ltr;text-align:left;}
.HEB             {direction: rtl;text-align:right;}


.c0 { color: #cccccc; }
.c1 { color: #25A6E1; }
.c2 { color: #FF5DB1; }
.c3 { color: #2f658a; }
.c4 { color: #ffffff; }
.c5 { color: #eeeeee; }
.c6 { color: #7d7d7d; }
.c7 { color: #9c2e44; }
.c8 { color: #4b4a4a; }
.c9 { color: #abcc26; }
.c10{ color: #f2bb30; }
.c11{ color: #7c96bb; }
.c12{ color: #a6bbdb; }
.c13{ color: #3c766a; }

.bg1      { background-color: #e4ecf2;              }                .bg1:hover { opacity: 0.9;}
.bg2      { background-color: #eeeeee; padding:2px; }                .bg2:hover { opacity: 0.9;}
.bg3      { background-color: #1f60a9;              }                .bg3:hover { opacity: 0.9;}
.bg4      { background-color: #4b4a4a; padding:2px; }                .bg4:hover { opacity: 0.9;}
.bg5      { background-color: #0399ce; padding:2px; }                .bg5:hover { opacity: 0.9;}
.bg6      { background-color: #9c2e44;              }                .bg6:hover { opacity: 0.9;}
.bg7      { background-color: #5CCD00;              }                .bg7:hover { opacity: 0.9;}
.bg8      { background-color: #FF5DB1; padding:2px; }                .bg8:hover { opacity: 0.9;}
.bg9      { background-color: #e5edb0; padding:2px; }                .bg9:hover { opacity: 0.9;}
.bg10     { background-color: #d0dc85; padding:2px; }                .bg10:hover{ opacity: 0.9;}
.bg11     { background-color: #ffe0f1;              }                .bg11:hover{ opacity: 0.9;}
.bg12     { background-color: #fff5e0;              }                .bg12:hover{ opacity: 0.9;}
.bg13     { background-color: #fdffe0;              }                .bg13:hover{ opacity: 0.9;}
.bg14     { background-color: #dbecfa;              }                .bg14:hover{ opacity: 0.9;}
.bg15     { background-color: #7e95b7;              }                .bg15:hover{ opacity: 0.9;}
.bg16     { background-color: #1e2127; padding:2px; }                .bg16:hover{ opacity: 0.9;}
.bg17     { background-color: #414a5a;              }                .bg17:hover{ opacity: 0.9;}
.bg18     { background-color: #dff0d8;              }                .bg18:hover{ opacity: 0.9;}
.bg19     { background-color: #f8f8f8; padding:2px; }                .bg19:hover{ opacity: 0.9;}

.S   { font-size: 10px; font-weight: 200; }
.M   { font-size: 14px; font-weight: 200; }
.L   { font-size: 18px; font-weight: 200; }
.XL  { font-size: 22px; font-weight: 200; }
.XXL { font-size: 30px; font-weight: 200; }
.XXXL{ font-size: 45px; font-weight: 200; }







/****************************************************************************************************************/
/********************************vordu element *****************************************************************/
/****************************************************************************************************************/

.b1        { box-shadow:0 0 1px 0px #63a5e1 inset; transition: all 0.5s;cursor: pointer;background: -webkit-linear-gradient(top,#5978e2 0%,#64ade0 100%);background: -moz-linear-gradient(top,#25A6E1 0%,#1582dc 100%);background: -o-linear-gradient(top,#25A6E1 0%,#1582dc 100%);background: -ms-linear-gradient(top,#25A6E1 0%,#1582dc 100%);background: linear-gradient(top,#25A6E1 0%,#1582dc 100%);padding: 8px 12px;color: #fff;font-family:"Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 5px;border: 1px solid #1A87B9; }
.b1:hover  { box-shadow: 0 2px 20px 5px #63a5e1 inset;}
.b1:active { transform:scale(1.2);                      }

.b2        { box-shadow:0 0 1px 0px #FF5DB1; transition: all 0.5s;cursor: pointer;background: -webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);padding: 8px 12px;color: #fff;font-size: 17px;border-radius: 5px;border: 1px solid #c01f5b;}
.b2:hover  { box-shadow: 0 2px 20px 5px #FF5DB1 inset; }
.b2:active { position:relative;top:1px;               }

.b3        { box-shadow:0 0 1px 0px #c8e362 inset; transition: all 0.5s;cursor: pointer;background: -webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);padding: 8px 12px;color: #fff;font-size: 17px;border-radius: 5px;border: 1px solid #459A00;}
.b3:hover  { box-shadow: 0 0 30px 5px #c8e362 inset;  }
.b3:active { transform:scale(1.2);                      }

.b4        {  display: block;cursor:pointer;line-height: 30px;border-radius: 5px;font-size: 18px;font-family: sans-serif;text-decoration: none;color: #1256a8;border: 2px solid #1256a8;letter-spacing: 2px;text-align: center;position: relative;transition: all .35s;}
.b4:after  {  position: absolute;  content: " ";  top: 0; left: 0; width: 0; height: 100%;border-radius: 5px;  background: #1256a8;transition: all .35s;color: #fff;}
.b4:hover  { color: #fff;}
.b4:hover:after{width: 100%;}
.b4:active { transform:scale(1.2);}

.b5        { line-height: 1.25;  text-decoration: none;  letter-spacing: .08em;  text-transform: uppercase;  position: relative;   overflow: hidden;background: #C66; border:1px solid #630;transition: all 0.5s; border-radius:10px;box-shadow: 0px 0px 12px -2px #ccc; cursor:pointer;color:#ffffff;font-size:18px;padding:3px 6px; text-decoration:none;}
.b5:hover  { background-color:#630;}
.b5:active { transform:scale(1.2); }

.b6        { background:transparent;border:2px dotted #1256a8;transition: all 0.5s;cursor:pointer;color:#1256a8;font-family:Arial;font-size:18px;padding:8px 12px;text-decoration:none;margin: 5px;}
.b6:hover  { background:#1256a8;color:#fff;}
.b6:active { transform:scale(1.2);         }

.b7        { box-shadow:0 0 1px 0px #c8e362 inset; transition: all 0.5s;cursor: pointer;background: -webkit-linear-gradient(top,#88b300 0%,#abcc26 100%);padding: 8px 12px;color: #fff;font-size: 17px;border-radius: 5px;border: 1px solid #459A00;}
.b7:hover  { box-shadow: 0 0 30px 5px #c8e362 inset;  }
.b7:active { transform:scale(1.2);                      }

.b8        { transition: all 0.5s;cursor: pointer; padding: 8px 13px;color: #258be8;;font-size: 18px;border-radius: 4px;box-shadow:inset 0px 1px 0px 0px #ffffff;background: transparent;background-color:transparent;border:1px solid #258be8;box-shadow: 0 0 1px 1px #fff;}
.b8:hover  { border:1px solid #fff; box-shadow: 0 0 1px 1px #fff; background:#258be8;color: #fff; }
.b8:active { transform:scale(1.2);                      }

.b9        { border:1px solid #333; transition: all 1s;box-shadow:3px 37px 0px -14px #6b6b6b inset;background:-webkit-linear-gradient(top, #5c5c5c 10%, #2e2e2e 90%);display:inline-block;cursor:pointer;color:#ffffff;font-size:18px; border-radius:10px;padding:8px 12px;text-decoration:none;text-shadow:-1px 1px 20px #3b3b3b;}
.b9:hover  { box-shadow: 0 0 5px 1px #8aaac4 inset;}
.b9:active { transform:scale(1.2);                      }


.boxs          { transition: all 0.7s;background-color: #a3c5f4;border-radius: 30%; font-size:24px;text-align: center;color: #fff;text-align: center; padding:80px 0 0 0;width: 200px;height: 200px;margin:20px;}
.boxs img      { border-radius: 1%;}
.boxs:hover    { border-radius: 25%;background-color: #5e9ff8;color: #eee;cursor: pointer;	border-color: #eee;}

.box           { transition: all 0.5s;width: 280px; border-radius: 12px;text-align: center;border: 1px dotted #999; margin:5px;  cursor: pointer;}
.box:hover     { border-color: #333;transform:scale(1.05);}
.Box div       { transition: all 0.5s;border-radius:10px 10px 0  0 ; background-color: white; padding-top:90px; background-repeat:no-repeat; background-position:center; cursor: pointer;text-align: center;width:278px; height:250px;  }
.Box div:hover { height:300px; -webkit-filter: contrast(2);}
.Box span      { transition: all 0.5s;border-radius: 0  0 10px 10px; cursor: pointer; background-color: #eee;  padding:25px 15px 25px 0px; text-align: right;width:278px;color:#333; }
.Box span:hover{ background-color: #258be8;color: #fff;}

.tabs,.tabs_   { width: 130px;cursor: pointer;text-align: center;transition: all 0.6s;padding:15px; text-shadow: 0 0 10px #FFF;font-size: 18px;}
.tabs          { background: #e6eff6;box-shadow: 0 0 2px 1px #dbecfa inset;color: #1f60a9;}
.tabs:hover    { background: #9cbee4;color: #fff; z-index: 1000;}
.tabs_         { background: #1f60a9;color: #fff;}
.tabs_:hover   { background: #1582dc; }

.tr,.td          { font-size: 14px;color: #333333;transition: all 0.5s;border: 1px dotted #999;}
.tr              { background-color: #f8f8f8; padding:2px ; margin: 2px; height: 50px;}
.tr:hover        { background-color: #dbecfa; opacity: 0.9;}
.td              { background-color: #f9f9f9; padding:5px ; margin: 5px; height:80px; }
.td:hover        { background-color: #dee6f3; opacity: 0.9; box-shadow: 0 0 10px 1px #dee6f3;height:83px;}
.td:active,.tr:active  { transform:scale(1.05);}

.fullscreen      { position:fixed;left:0;top:0;width:100%; height:100%;background-color: #1E427C;padding-top:400px; opacity: 0.8; text-align:center;}
.Dailog          { position: fixed;top:200px;left:100px;background-color: #fff;width: 70%;height: 400px;padding: 10px;border-radius: 9px;opacity: 0.95;box-shadow: 0 0 20px 1px #333; z-index: 9000;}

.badge1          { background-color:#7e95b7; position: relative;top:-30px;right:-12px;border-radius:5px;padding:3px; color:#FFF; font-weight: -100; opacity: 0.9; }
.badge2          { background-color:#1E427C; position: relative;top:-15px;left:2px;   border-radius:5px;padding:3px; color:#FFF; font-size: 10px; font-weight: -100; opacity: 0.9; }
.badge3          { background-color:#FF5DB1; position: relative;top:-5px;left:2px;   border-radius:5px;padding:3px; color:#FFF; font-weight: -100; opacity: 0.8; z-index: 450; }


.loading         { background-image:url('/files/system/load2.gif');width:100%;height:240px;background-position:50% 50%;background-repeat:no-repeat;margin:auto;}
.line            { background-color:#1f60a9; padding:1px; width:100%; text-align:right;margin:0 auto 30px;}


.error           { color: #E8124F;text-shadow: 0px 0px 11px red;padding: 30px;}
.success         { background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d}

/********************************single element in page *****************************************************************/

#msg             { position:fixed; top:200px;opacity: 0.92; width:100%; text-align:center;font-size:40px;text-shadow:0px 0px 20px #eee ; font-weight:bold; color:#FFFFFF; padding:50px 0 50px 0;  background-color:#7e95b7; z-index: 1000; }

#pMng            { width:100%;max-width:900px;margin: auto; background-color: #eff1f3; height: 60px;border-radius:5px;}
#NEXT            { width:100%;max-width:900px;margin: auto; padding:10px; color:#1582dc;background-color: #f8f8f8;cursor:pointer;border:1px dotted #1582dc;border-radius: 7px; text-align: center;transition:all 0.8s; font-size: 20px;}
#NEXT:hover      { background-color:#1582dc;color:#f8f8f8;}

#addnew   { position: fixed; bottom:45px; text-align:left; z-index: 200;left:10%; }
#adNT     { background-color:#2d3c44; cursor:pointer; box-shadow:#12181c inset; text-align:center; border-radius: 9px 9px 0 0; width:150px;  color:#FFFFFF;font-size:100px;margin-left:50px; }
#adNM     { background-color:#e5e9f3;box-shadow:0 13px 20px 1px #2d3c44;overflow:auto; height:400px; padding:20px; border-color:#2d3c44; border-style:solid; border-width:thin; border-bottom-width:0;border-top-width:20px; border-radius:8px 8px 0 0;color: #2d3c44}



/**************************** Effects ************************************************************************/

.scroll          {overflow: auto;x-overflow: no;border: 1px solid #eee;background-color: #fff;} 

.blur {color: transparent;text-shadow: 0 0 1px #eee;}
.rotate {transform: rotate(-180deg);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.sdw    {text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}


/* -webkit-filter: brightness(3);
   -webkit-filter: contrast(9);
   -webkit-filter: invert(.8);
   -webkit-filter: saturate(8);}*/

.bw            { -webkit-filter: grayscale(1);transition: all;  }
.bw:hover      { -webkit-filter: grayscale(9);                  }

.sepia         { -webkit-filter: sepia(5);transition: all;      }
.sepia:hover   { -webkit-filter: sepia(9);                   }



/*****************************transform *********************************************************************/

.scl           {  transform:scale(1);transition: 1s;z-index: 10; }
.scl:hover     {  transform:scale(1.5); z-index: 1000;}

.scls           {  transform:scale(1);transition: 1s;z-index: 10; }
.scls:hover     {  transform:scale(1.1); z-index: 1000;}

.rots          {  transform: rotate(-90deg);float: left;  transition: all;}
.rots:hover    {  transform: rotate(0deg); }

.rot           {  transform: rotateY(0deg);transition: all 1s; }
.rot:hover     {  transform: rotateY(180deg);}

.skew          {  transform:skewX(0deg);transition: all 1s; }
.skew:hover    {  transform:skewX(180deg);}

.trans         {  transform:translateX(0px);transition: all 1s;  }
.trans:hover   {  transform:translateX(100px);}





                                                                               /*height: calc(100vh- 80px);*/
/*****************************Animation *****************************************width:  calc(100% - 20px);*/

.marquee            { animation: marquee_ 5s infinite ease;animation-delay: 2s;animation-direction: alternate;animation-play-state: running;}
.pulse              { animation: pulse_ 4s infinite ease;animation-delay: 2s;animation-direction: alternate;animation-play-state: running;  }
.fadein             { animation:fadein_ 5s;                                                                                                 }
.shake              { animation:shake_ 2s;                                                                                                  }
.zoomin             { animation:zoomin_ 1s;                                                                                                 }
.rotate             { animation: rotate_ 4s infinite ease;animation-direction: alternate;animation-play-state: running;                     }



@keyframes marquee_ {0% {left: 0px;}  100% {left: 20px;}}

@keyframes pulse_   {0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

@keyframes fadein_  {0% {opacity:0} 100%{opacity:1} }

@keyframes shake_   {0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}

@keyframes zoomin_  {0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}

@keyframes rotate_  { 0%{ -webkit-transform: rotateY(0deg);} 30% { -webkit-transform: rotateY(10deg);}  50% { -webkit-transform: rotateY(180deg);} 70% { -webkit-transform: rotateY(10deg);} 100% { -webkit-transform: rotateY(0deg);}}

/**************************** screen media ************************************************************************/
/****************************************************************************************************************/


@media only screen and (max-width : 900px)/* smartphones & Tablets ----------- */
{
    .inpt     { width:80%;}
	#addnew   {bottom:0px;left:0;width:100%;}
    #adNM     {border-radius:0;}
}