@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=latin-ext');



@font-face{
      font-family:'Gilroy';
      font-style:normal;
      font-weight:300;
      font-display: swap;
      src:local('../fonts/Gilroy-Light'),url(https://fonts.cdnfonts.com/s/16219/Gilroy-Light.woff) format('woff');
}
@font-face{
      font-family:'Gilroy';
      font-style:normal;
      font-weight:400;
      font-display: swap;
      src:local('../fonts/Gilroy-Regular'),url(https://fonts.cdnfonts.com/s/16219/Gilroy-Regular.woff) format('woff');
}


@font-face{
      font-family:'Gilroy';
      font-style:normal;
      font-weight:500;
      font-display: swap;
      src:local('../fonts/Gilroy-Medium'),url(https://fonts.cdnfonts.com/s/16219/Gilroy-Medium.woff) format('woff');
}

@font-face{
      font-family:'Gilroy';
      font-style:normal;
      font-weight:700;
      font-display: swap;
      src:local('../fonts/Gilroy-Bold'),url(https://fonts.cdnfonts.com/s/16219/Gilroy-Bold.woff) format('woff');
    

}
@font-face{
      font-family:'Gilroy';
      font-style:normal;
      font-weight:900;
      font-display: swap;
      src:local('../fonts/Gilroy-Heavy'),url(https://fonts.cdnfonts.com/s/16219/Gilroy-Heavy.woff) format('woff');


}





@-webkit-keyframes fadeInDown {
    from { top:-500px;  }
    to { top:0px; }
}
@-moz-keyframes fadeInDown {
    from { top:-500px;  }
    to { top:0px; }
}
@keyframes fadeInDown {
    from {  top:-500px;  }
    to {  top:0px; }
}


@-webkit-keyframes imageAnimation { 
	0% {
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
}
@-moz-keyframes imageAnimation { 
	0% {
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    -moz-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    -moz-transform: scale(1.1) rotate(3deg);
	}
}
@-o-keyframes imageAnimation { 
	0% {
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    -o-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    -o-transform: scale(1.1) rotate(3deg);
	}
}
@-ms-keyframes imageAnimation { 
	0% {
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    -ms-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    -ms-transform: scale(1.1) rotate(3deg);
	}
}






* { margin:0px;padding:0px;list-style-type: none;  }


hr { 
	border: 0px !important;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(225, 225, 225, 0.75), rgba(0, 0, 0, 0));
    margin:20px 0px;
}
a, a:hover, a:focus { cursor:pointer;text-decoration: none;  }


body { 
	background: url(../images/bg.jpg) left top no-repeat; background-size: 100%;
	font-family: 'Gilroy', sans-serif; 
	color: #1A1D23;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-feature-settings: "kern" 1;
	-moz-font-feature-settings: "kern" 1;
	font-size:14px;
    padding-bottom: 100px;
}
button[type=submit] .far{margin-right:5px;}



.alertify { 
    position: fixed;left: 0;right: 0;
    display: flex;align-items: center;justify-content: center;
    background: #FFFFFF;padding:15px 0px;font-size: 17px;
    -webkit-animation: alertify 0.3s forwards;
    -moz-animation: alertify 0.3s forwards;
    -o-animation: alertify 0.3s forwards;
    animation: alertify 0.3s forwards;

    -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    
     
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown; 
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -o-animation-duration:1s;
    z-index: 999999999999;
}


.alertify .fa { display:inline-block; width:22px; height:22px; line-height: 22px; font-size:14px; margin-right:10px;text-align: center; border-radius: 100%; }

.alertify.success{ background: #27ae60;color:#FFFFFF; }
.alertify.success .fa { background: #FFFFFF;color:#27ae60; }

.alertify.error { background: #E74C3C;color:#FFFFFF; }
.alertify.error .fa { background: #FFFFFF;color:#E74C3C; }

.alertify.warning { background: #f39C12;color:#FFFFFF; }
.alertify.warning .fa { background: #FFFFFF;color:#f39C12; }




.index .panel-default {  width:400px;z-index: 8888; }
.index .panel-heading { display:block;padding:30px;color:#444;font-size:18px;font-weight: bold;  }
.index .panel-body { padding:40px 30px;}
.index .panel-footer { padding: 30px;}


.fa-small{
	font-size: small !important;
}
.color-green{
	color: green !important;
}
.ml-0{
	margin-left: 0 !important;
}



.meeting{  position: relative; display: grid; grid-template-columns: 70% 30% ; height:calc(100vh - 150px); overflow: hidden; }

.meeting .left { position:relative;padding-right:30px;  }

.meeting .left .title { 
    position:absolute;top:0px;left:0px;right:30px;
    padding:30px;background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(255,255,255,0) 100%);
    font-size:18px;font-weight:bold;color:#FFF;border-top-left-radius: 15px;border-top-right-radius: 15px; 
}
.meeting .left video{ background:#000;height:calc(100vh - 155px); width: 100%; border-radius: 15px; }

.meeting .controls{ position: absolute;left:0;bottom:50px;width:100%; display: flex;align-items: center;justify-content: center; }

.meeting .controls img{ width: 40px; margin: 0px 10px; cursor: pointer; transition: transform 0.5s; }
.meeting .controls .call-icon{ width: 70px; }
.meeting .controls img:hover{ transform: translateY(-10px); }



.meeting .widget { padding:0px; }
.meeting .widget .title { font-size:24px;color:#1A1D23;font-weight:bold;padding-bottom:15px;font-family:'Plus Jakarta Sans', sans-serif;  }

.meeting .users { display:flex;align-items:center;justify-content:flex-start;overflow-x:auto; }
.meeting .users img{ max-width:50px;flex:1;flex-grow: 1; margin-right: 5px; border-radius: 50%;}


.meeting .chats { margin-top:30px; }
.meeting .messages {  max-height:75%;height:75%;overflow-y:scroll; }
.meeting .messages .item { display:flex;align-items: flex-start;justify-content: flex-start; }
.meeting .messages .item + .item { margin-top:10px;padding-top:10px; }
.meeting .messages .item .icon { max-width:40px;min-width:40px;margin-right:15px; }
.meeting .messages .item .icon img { width:100%; }
.meeting .messages .item .name { font-size:10px;font-weight:bold;padding-left:10px; }
.meeting .messages .item .text { padding:5px 10px;border-radius:4px;background:#0084FF;color:#FFF; }

.meeting .reply { background:#FFF;color:#999;padding:15px 30px;border-radius:50px; margin-top:30px;}

.top { position: relative;display: flex;align-items: center;justify-content: start;background: #FFFFFF;border-bottom:1px solid #EEEEEE;z-index: 66667; }

.top .change { display:block;width:65px;font-size:18px;padding:10px 20px;margin-right:15px;border-right:1px solid #EEE;text-align:center; }

.header {  position: relative; display: flex; align-items: center; justify-content: center; background: #FFFFFF;  margin-bottom:30px; border-bottom:1px solid #EEE; box-shadow: 0 2px 5px rgba(0,0,0,.05), 0 0 56px rgba(0,0,0,.050) !important; width:100%;  z-index: 66666; }

.header .nav { display:flex;align-items: center;justify-content: center; }

.header .left .logo  { font-size:26px; }
.header .left .logo img { max-height:50px;margin-right:15px;}
.header .left > li {  display: inline-block; }
.header .left > li:first-child > a {  padding-left:25px;padding-right:25px;	border-right:1px solid #EEEEEE; }
.header .left > li:last-child > a { border-right:0px; }
.header .left > li > a {  display: flex; align-items: center; padding:20px 0px 20px 20px; font-size: 15px; -webkit-transition:all .1s ease; transition: all .1s ease;  font-weight: bold; }
.header .left > li > a > .fa { margin-right:5px; }
.header .left li a:hover { background:none; color:#000; }

.header .right { margin-left: auto;padding-right: 25px;}
.header .right > li a { font-size:15px;padding:5px 10px;font-weight:bold; }


.mobile-header { 
	position: fixed;top:0;left:0;padding:15px;height:90px;
	display:none;align-items: center;justify-content: center;
	background: #FFFFFF; margin-bottom:30px;border-bottom:1px solid #DDD;
	box-shadow: 0 2px 5px rgba(0,0,0,.05), 0 0 56px rgba(0,0,0,.050) !important;
	width:100%; z-index: 66666;
}

.mobile-header .logo { max-width:50px;margin-right:auto; }
.mobile-header .logo img{ max-width:100%; }
.mobile-header .toggle { font-size:20px;color:#212121;margin-right:10px;}

.mobile-header .right { display:flex;align-items:center;justify-content:center; }
.mobile-header .right > li > a { padding:0 0 0 15px; }

.mobile-menu { position:fixed;top:90px;left:-500px;bottom:0;width:400px;background: #FFFFFF;padding-top:10px;border-right:1px solid #EEE;-webkit-transition:all .1s ease; box-shadow: 0 2px 5px rgba(0,0,0,.05), 0 0 56px rgba(0,0,0,.050) !important;z-index:2; }

.mobile-menu .nav > li > a { padding:15px 20px; }
.mobile-menu .nav > li > a .fal { width:20px; }
.mobile-menu .nav > li + li { border-top:1px solid #EEE; }

.open .mobile-menu { left:0px; }

            
.wrapped { background: #FFF;border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px;padding:15px 15px 0px 15px;overflow:hidden;margin-bottom:20px; }
.wrapped .title { color:#FFF;padding:15px;border-bottom:1px solid #34495e;font-weight: bold;background:#34495e;margin-left:-15px;margin-right:-15px;margin-top:-15px;margin-bottom:20px; }

.wrapped.slim { padding:0px; }
.wrapped.slim .title{ margin:0px; }


.tools{display: flex;align-items: center;margin-bottom:30px;margin-top:15px;}
.tools .left .title{ font-size:32px;font-family:'Plus Jakarta Sans', sans-serif;font-weight: bold;}

.tools .left .dropdown-toggle {display: block;float:left;border-bottom:2px solid transparent;padding: 16px 16px 14px;color:#2271b1;}
.tools .right {margin-left:auto;padding-right:16px;}
        

 .trainings .item {
                                    position: relative;
                                    display:flex;
                                    align-items: flex-start;
                                    justify-content: flex-start;
                                    flex-direction: column; 
                                    background:#FFFFFF;
                                    height:450px;
                                    margin-bottom:30px;
                                    border:1px solid #EEE;
                                    border-radius:4px;
                                    overflow:hidden; 
                              }

                              .trainings .photo {
                                    display:flex;
                                    align-items:center;
                                    justify-content:center;
                                    position:relative;
                                    height:250px;
                                    min-height: 250px;
                                    max-height: 250px;
                                    width:100%;
                                    background-position:top center;
                                    background-size:cover;
                                    background-repeat:no-repeat;
                              }

                              .trainings .photo:before { 
                                    content:'';
                                    position:absolute;
                                    top:0;
                                    left:0;
                                    width:100%;
                                    height:100%;
                                    background:rgba(0,0,0,.3);
                                    transition:all .1s ease;
                                    opacity:0;
                              }

                              .trainings .photo:after { 
                                    content:'▶';
                                    position:relative;
                                    display:inline-block;
                                    width:40px;
                                    height:40px;
                                    line-height:40px;
                                    background:red;
                                    color:#FFF;
                                    text-align:center;
                                    border-radius:100%;
                                    transition:all .3s ease;
                                    opacity:0;
                                    z-index:2;
                              }

                              .trainings .item:hover .photo:before, .trainings .item:hover .photo:after { opacity:1; }

                              .trainings .caption { padding:30px; }
                              .trainings .subtitle { font-size:15px;font-weight:bold;color:#888888; }
                              .trainings .title { font-size:18px;font-weight:bold;padding:10px 0px; }

                              
                              .trainings .badge { 
                                    display:inline-block;
                                    background:#242424;
                                    padding:4px 6px;
                                    color:#FFF;
                                    border-radius:2px;
                                    font-size:13px; 
                              }



.widget { display: block; position: relative;padding:40px 40px 20px 40px; }
.widget .heading { font-size:24px; }



.soccerfield-field { margin:0 auto; }
.soccerfield-player { position: absolute; width:50px; height:50px; line-height: 50px; border-radius: 100%; font-weight: bold; background: #000; color:#FFF; font-size:16px; text-align: center; }
.soccerfield-field-field-img { width:100%; height: 100%; position:absolute; top: 0px; left:0px; }
.soccerfield-player.posX-GK { left:5%; }
.soccerfield-player.posX-B { left: 20%; }
.soccerfield-player.posX-DM { left: 35%; }
.soccerfield-player.posX-M { left:50%; }
.soccerfield-player.posX-AM { left: 65% }
.soccerfield-player.posX-F { left: 80%; }
.soccerfield-player.posY-L { top: 10%; }
.soccerfield-player.posY-LC { top: 29.5% }
.soccerfield-player.posY-C { top:45%; }    
.soccerfield-player.posY-RC { bottom:30%;  }
.soccerfield-player.posY-R { bottom:10%;  }


        

.event { 
    background: #fff;
    padding: 30px;
    font-size:15px;
    border-bottom: 8px solid transparent;
    transition: all .1s ease-in-out;
    border:1px solid #EEE;
    background: #FEFEFE;
}


.event .title { font-weight:bold;color:#1b2734;font-size:20px;margin-bottom:15px; }

.event .meta { display:flex;align-items:center;justify-content:flex-start;margin-bottom:15px;font-weight:300; }
.event .meta li { margin-right:10px; }
.event .meta li .fal { margin-right:5px; }

.event p { font-weight:300;margin-bottom:15px; }

.event .btn-time { color:#FFF;min-width:100px;border:2px solid transparent;text-transform:none; }
.event .btn-join { min-width:100px;background:none;border:2px solid transparent;text-transform:none; }



.event.orange { border-color:#ea643f; }
.event.orange .btn-time { border:2px solid #ea643f;background:#ea643f; }
.event.orange .btn-join{ border-color:#ea643f;color:#ea643f; }

.event.purple { border-color:#7858d7; }
.event.purple .btn-time { border:2px solid #7858d7;background:#7858d7; }
.event.purple .btn-join{ border-color:#7858d7;color:#7858d7; }

.event.green { border-color:#5baa73; }
.event.green .btn-time { border-color:#5baa73;background:#5baa73; }
.event.green .btn-join{ border-color:#5baa73;color:#5baa73; }

.event.blue { border-color:#465af7; }
.event.blue .btn-time { border-color:#465af7;background:#465af7; }
.event.blue .btn-join{ border-color:#465af7;color:#465af7; }

.event.red { border-color:#c0392b; }
.event.red .btn-time { border-color:#c0392b;background:#c0392b; }
.event.red .btn-join{ border-color:#c0392b;color:#c0392b; }




body.ar { direction:rtl;text-align:right;font-size:18px;  }

body.ar .header li a { font-size:16px; }
body.ar .header .left > li:first-child > a { border-left:1px solid #EEE;border-right:0px;padding-left:30px; }
body.ar .header .left > li > a { padding-left:0px;padding-right:30px;text-align:right; }
body.ar .header .right{ margin-left:0px;margin-right:auto; }
body.ar .header .right > li > a{ border-right:1px solid #EEE;padding:30px 15px; }
body.ar .header .right > li:first-child > a{ border-right:0px; }
body.ar .dropdown li a { text-align:right; }
body.ar .dropdown li a img { margin-right:0px;margin-left:5px; }


body.ar .mobile-menu { right:-500px;left:auto;  }
body.ar.open .mobile-menu { right:0px;  }

body.ar .mobile-header .logo {  margin-right:0px; margin-left:auto; }
body.ar .mobile-header .toggle { margin-left:15px; }
body.ar .mobile-header .right > li > a { padding-left:0;padding-right:10px;font-size:15px; }

body.ar .table tbody tr td:last-child { text-align:left !important; }
body.ar .table thead tr th,  body.ar .table tbody tr td,  body.ar .table tfoot tr th{ text-align:right !important }
body.ar .tools .right { margin-left: 0px; margin-right: auto; padding-left: 16px; }

body.ar .dataTables_filter label .fa-search { right:15px;left:auto; }
body.ar .dataTables_filter input { padding-right:45px;padding-left:15px; }
body.ar .dataTables_info { float:right; }
body.ar .dataTables_paginate { float:left;text-align:left;direction: ltr; }

body.ar .btn-sm { font-size:inherit; }

body.ar .meeting .left { padding-right:0px;padding-left:30px; }
body.ar .meeting .left .title { left:30px;right:0px; }
body.ar .meeting .messages .item .icon { margin-right:0px;margin-left:15px; }

body.ar [class*=col-md] { float:right; }





@media screen and (max-width: 768px) {

	body { padding-top:120px; }

	.login .panel-default{ width:90%; }

	.header { display:none; }
	body.ar .header li a { font-size:14px; }

	.mobile-header { display:flex; }

	.mobile-header .logo { font-size:16px; }

	.soccerfield-field{ max-width: 100% !important; height: 35vh !important; }

    .soccerfield-player{ width:25px;height: 25px;line-height: 25px;font-size:13px; }

    .meeting { display:block;height:auto; }
    .meeting .left{ padding-right:0px;margin-bottom:30px; }

    .meeting .users, .meeting .widget .title, .meeting .messages { padding:15px; }

    .meeting .users img { max-width:30px; }

    .meeting .chats { margin-bottom:30px; }

    .event { padding:15px;font-size:14px; }

    .event .title { font-size:16px;margin-bottom:10px; }
    .event .meta { font-size:14px;margin-bottom:10px; }
    .event p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;   overflow: hidden; }

}