.modal-content * {box-sizing: border-box;}

.modal-open .modal{ overflow-x: hidden; overflow-y: auto; }
.fade.in{ opacity: 1; }
.fade{ opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; }
.modal{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }
.modal h3{    margin: 0; color: rgb(255, 255, 255); padding: 0; font-weight: normal; font-size: 18px; }
.control-h4{ margin: 0; }
.modal-backdrop{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; }
.modal-backdrop.in{ filter: alpha(opacity=50); opacity: .5; }
/* display: flex; => post modal */
.modal.in .modal-dialog{ display: flex; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); }


.modal-dialog.md4{ max-width: 400px; margin: 100px auto; }
.modal-dialog.md6{ max-width: 600px; margin: 100px auto; }
.modal-dialog.md8{ max-width: 800px; margin: 100px auto; }
.modal-dialog.md10{ max-width: 1000px; margin: 100px auto; }

.modal-content{ margin: 20px 0; float: left; width: 100%; position: relative; background-color: rgb(250, 250, 250); -webkit-background-clip: padding-box; background-clip: padding-box; border-radius: 5px; outline: 0; -webkit-box-shadow: 0 0px 1px rgba(0,0,0,.5); box-shadow: 0 0px 1px rgba(0,0,0,.5); }
.modal-header{ display: block; min-height: 16.43px; background-color: #1e96d2; padding: 20px 80px 20px 5%; position: relative; }
.modal-body{ position: relative; padding: 4%; float: left; width: 100%; box-sizing: border-box; }
.modal-body a { color: #1e96d2; }
.modal-settings{ overflow: hidden; position: relative; padding: 3%; float: left; width: 100%; }
.modal-menu{ background-color: white; text-align: center; padding: 20px; box-shadow: inset 0 0 1px 1px rgba(230,230,230,1); }
.modal-menu a{ margin: 0 10px; padding: 5px 0; font-weight: bold; color: rgba(100,100,100,1); }
.modal-menu a:hover{ color:rgb(30, 150, 210); }
.modal-menu a.selected{ border-bottom: 2px solid rgb(30, 150, 210); }

.form-title{ font-size: 24px; margin: 2% 3%; padding: 1% 2%; color: rgba(100,100,100,1); width: 90%; display: inline-block; background-color: rgba(225,225,225,1);}
.form-bar{ clear: both; border-bottom: 1px solid rgb(225, 225, 225); padding: 1% 4% 1% 4%; margin: 10px 4%; display: inline-block; width: 92%; box-sizing: border-box; } 
/*.f-b{ background-color: rgba(230,230,230,1); }*/
.form-flex{ display: flex; }
.form-left{ float: left; width: 50%; margin: 1% 0;}
.form-right{ float: right; width: 50%; margin: 1% 0;}
.form-group{ padding: 1% 4% 1% 4%; float: left; width: 100%; position: relative; box-sizing: border-box; }
.form-group.w50 { width: 50% !important; }
.form-group .label-title{ float: left; width: 100%; font-weight: bold; padding: 0 0 10px 0%; font-size: 12px;}
.form-group textarea{ width: 100%; height: 50px; padding: 10px; box-sizing: border-box; resize: vertical !important; border-radius: 4px; }
.form-group input[type="text"]{ height: 40px; width: 100%; padding: 0px 10px; border-radius: 4px; margin-bottom: 2px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.form-group input[type="date"]{ padding: 10px; width: 100%; font-family: sans-serif; letter-spacing: 1px; font-size: 13px; box-sizing: border-box; }
.form-group input[type="time"]{ padding: 10px; width: 100%; font-family: sans-serif; letter-spacing: 1px; font-size: 13px; box-sizing: border-box; }
.form-group select{ width: 100%; padding: 0 6px; height: 40px; margin: 0; border-radius: 4px; margin-bottom: 4px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.form-group select.empty{ color: rgb(170, 170, 170) !important; } 
.form-group label.control-label { font-weight: 600; color: rgba(50, 80, 100, 1); line-height: 40px; text-transform: uppercase; }
.form-group span.control-helper { font-size: 12px; font-weight: normal; float: right; text-transform: lowercase; font-style: italic; }
.form-group span.control-error { position: absolute; color: red;}
.form-group .disable{ color: rgb(30, 150, 210); background-color: rgb(255, 255, 255) !important; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); border: none !important; display: block; float: left; padding: 10px; width: 100%; }
.form-group .associate{ text-align: center; }
.form-group .associate p{ font-weight: bold; font-size: 12px; margin-bottom: 10px; }
    

.form-full{ line-height: 30px; padding: 2%; float: left; width: 100%;}
.form-full label{ float: left; width: 100%; font-weight: bold; padding: 0 0 10px 0%; font-size: 12px;}
.form-full textarea{ min-height: 50px; width: 100%; padding: 10px; line-height: 20px; resize: vertical !important; margin: 0; display: block; box-sizing: border-box; }
/* Modal - Tournament (add) */
.form-group .ui-slider-horizontal{ margin: 13px 0; box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); border: none !important; background-color: rgb(240, 240, 240); }
.form-group .ui-slider-horizontal .ui-slider-handle{ width: 30px; height: 30px; top: 3px; text-align: center; line-height: 30px; border-radius: 100%; background-color: #1e96d2; border: none; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); outline: none; color: rgb(250, 250, 250); font-weight: 600; }
   
.form-statut textarea{ width: 300px; padding: 15px 5px; border: none; background-color: transparent; box-shadow: 0px 0px 10px 1px rgb(235, 235, 235); line-height: 20px; resize: vertical !important; margin: 0 0 0 5%; text-align: center;     margin: auto; display: block;     font-size: 14px; }
.form-submit{ margin: 2% 3%; padding: 1% 2%; width: 90%; display: inline-block; text-align: center; }

 

    
/* all */
.modal-content input[type="text"],.modal-content input[type="date"], .modal-content select, .modal-content textarea{  color: rgb(30, 150, 210); background-color: rgb(240, 240, 240) !important; box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); border: none !important; } 
.modal-content input[type="text"]:focus,.modal-content input[type="date"]:focus, .modal-content select:focus, .modal-content textarea:focus{ background-color: rgb(255, 255, 255) !important; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); } 

.modal-content input[type="text"]::-webkit-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content input[type="text"]::-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content input[type="text"]:-ms-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content input[type="text"]:-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }

.modal-content input[type="date"]::-webkit-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content input[type="date"]::-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content input[type="date"]:-ms-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content input[type="date"]:-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }

.modal-content select::-webkit-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content select::-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content select:-ms-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content select:-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }

.modal-content textarea::-webkit-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content textarea::-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content textarea:-ms-input-placeholder{ color: rgba(50, 50, 50, 0.5); }
.modal-content textarea:-moz-placeholder{ color: rgba(50, 50, 50, 0.5); }


.modal-shifumi{ float: left; width: 33%; text-align: center; padding: 20px 0; border-radius: 20px; }
.modal-shifumi span{ float: left; width: 100%; margin: 10px 0 0 0; font-size: 26px; color: rgb(125, 130, 150);     font-weight: bold; }
.modal-shifumi:hover span, .modal-shifumi:hover i{ color: rgba(30,150,210,1); }
.modal-shifumi:hover{ background-color: rgba(235,235,235,1); }
.shifumi-none{ background-color: transparent !important; cursor: default; }
.shifumi-none span, .shifumi-none i{ color: rgba(125, 130, 150, 0.4)!important; }
.shifumi-select{ background-color: rgba(235,235,235,1); cursor: default; }
.shifumi-select span, .shifumi-select i{ color: rgba(30,150,210,1); }

/*-------------------------------------*/
.modal-body .uploadtext{ display: none; }
.modal-body .fileupload{ position: relative; overflow: hidden; margin-bottom: 20px;    width: 250px; margin: auto; display: block; }
.modal-body .fileupload input.upload{ position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }
.modal-body #preview-avatar-profile img{ cursor: crosshair; max-width: 100%; margin: auto; display: block; }
.modal-body form{display: table;     width: 100%; }

.modal-footer{ clear: both; padding: 20px 5%; position: relative; background-color: #f0f0f0; justify-content: baseline; }
.modal-footer .footer-warn{ line-height: 32px; color: #B2B3B5; font-weight: bold; font-size: 12px; }
.modal-footer .footer-warn:hover{    color: rgba(30,150,210,1); text-decoration: underline; }
.modal-footer button.btn-primary { background-color: rgba(120, 200, 60, 1); border: none; height: 100%; position: absolute; display: block; right: 0px; top: 0; padding: 0 30px; font-size: 16px; color: white;}
.modal-footer button.btn-primary:hover { background-color: rgb(250, 250, 250); color: rgb(120, 200, 60); box-shadow: -2px 0 0 0 #e4e8ec;}


.modal-header p{ color: rgb(240, 240, 240); }


.modal-close{ margin-top: -2px; }
.modal-close{ -webkit-appearance: none; padding: 0; cursor: pointer; border: 0; }
.modal-close i{ color: rgba(255,255,255,1); }
.modal-close{ background-color: rgba(255, 255, 255, 0); position: absolute; font-size: 20px; top: 2px; right: 0; width: 83px; height: 100%; text-align: center;}
.modal-close:hover{ background-color: rgba(250,250,250,1); }
.modal-close:hover i{ color: rgba(30,150,210,1) !important; }


.imgareaselect-outer{ cursor: crosshair; }




.modal .loader{ position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);       transform: translate(-50%, -50%); width: 50px; height: 50px; background-color: #03a9f4; border-radius: 50%; margin-top: 20px;float: left; box-shadow: 0 0 0 7px #03A9F4; }
.modal .loader:after{ content: ''; position: absolute; border-radius: 50%; top: 50%; left: 50%; border: 0px solid rgb(230,230,230); -webkit-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: loading 1000ms ease-out forwards infinite;       animation: loading 1000ms ease-out forwards infinite; }

@-webkit-keyframes loading{
  0%{ border: 0px solid rgb(230,230,230);
  }
  20%{ border: 8px solid rgb(230,230,230); width: 0%; height: 0%;
  }
  100%{ border: 8px solid rgb(230,230,230); width: 100%; height: 100%;
  } 
}

@keyframes loading{
  0%{ border: 0px solid rgb(230,230,230);
  }
  20%{ border: 8px solid rgb(230,230,230); width: 0%; height: 0%;
  }
  100%{ border: 8px solid rgb(230,230,230); width: 100%; height: 100%;
  } 
}



/*============================================================================================================================
==============================================================================================================================
=======================================================   Dark Theme   =======================================================
==============================================================================================================================
============================================================================================================================*/

.modal-content.dark { background-color: rgba(90,90,110,1); border-radius: 1px; }
.modal-content.dark .modal-header { background-color: rgb(30, 150, 210); color: white !important; }
.modal-content.dark .modal-header i{ color: white ; }
.modal-content.dark .modal-header h3{ margin: 0; padding: 0; font-weight: normal; font-size: 16px; color: rgb(255, 255, 255); text-align: center; }

.modal-content.dark .modal-body{ position: relative; padding: 10%; float: left; width: 100%; overflow: hidden; }
.modal-content.dark .modal-body .field{ margin-top: 15px; clear: both; }
.modal-content.dark .modal-body .field .error { padding: 2%; line-height: 30px; text-align: center; color: #fff; }
.modal-content.dark .modal-body input[type="text"],
.modal-content.dark .modal-body input[type="email"],
.modal-content.dark .modal-body input[type="password"] { float: left; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-size: 14px; border: none; outline: none; width: 96%; padding: 10px 2%; font-weight: bold; margin: 2%; font-family: 'Open sans',Montserrat, Calibri, Arial, sans-serif; }
.modal-content.dark .modal-body input[type="text"]:focus,
.modal-content.dark .modal-body input[type="email"]:focus,
.modal-content.dark .modal-body input[type="password"]:focus { color: rgb(90, 90, 110); background-color: rgba(255,255,255,1); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0); }
.modal-content.dark .modal-body .register-cgu{ color: rgb(255,255,255); }
.modal-content.dark .modal-body .register-cgu input{ display: none; }
.modal-content.dark .modal-body .register-cgu a{ color: #ffffff; font-weight: bold; text-decoration: none; }
.modal-content.dark .modal-body .register-cgu label{ padding-left: 8px; line-height: 22px !important; cursor: pointer; padding: 10px; background-color: rgba(0, 0, 0, 0.1); display: block; margin: 10px 0; }
.modal-content.dark .modal-body .register-cgu label:after{ content: ''; float: left; width: 10px; height: 10px; margin: 4px; border: 2px solid #515163; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); margin-right: 10px; }
.modal-content.dark .modal-body .register-cgu input[type=checkbox]:checked + label:after{ background-color: rgb(255, 255, 255) !important; }
.modal-content.dark .modal-body .register-warn span{ color: rgb(255, 255, 255); background-color: rgb(202, 17, 17); padding: 8px; display: block; }
.modal-content.dark .modal-body .register-recovery{ padding-left: 8px; line-height: 22px !important; cursor: pointer; padding: 10px; background-color: rgba(0, 0, 0, 0.1); display: block; margin: 2%; }
.modal-content.dark .modal-body .register-recovery a{ color: rgb(255,255,255); }

.modal-content.dark .modal-body .register-social{ float: left; margin: 10px 0; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.modal-content.dark .modal-body .register-social i{ color: white; margin-right: 8px; }
.modal-content.dark .modal-body .register-social a.go{ float: right; box-sizing: border-box; background-color:rgba(221, 75, 57, 1); width: 46%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.dark .modal-body .register-social a.st{ float: left; box-sizing: border-box; background-color:rgba(35, 31, 32, 1); width: 46%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.dark .modal-body .register-social a.tw{ float: left; box-sizing: border-box; background-color:rgba(0, 172, 237, 1); width: 46%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.dark .modal-body .register-social a.fb{ float: right; box-sizing: border-box; background-color:rgba(59, 89, 152, 1); width: 46%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.dark .modal-body .register-social a.tc{ float: right; box-sizing: border-box; background-color:rgba(75, 54, 124, 1); width: 46%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.dark .modal-body .register-social a.go:hover{ background-color: rgba(221, 75, 57, 0.8); }
.modal-content.dark .modal-body .register-social a.st:hover{ background-color: rgba(35, 31, 32, 0.8); }
.modal-content.dark .modal-body .register-social a.tw:hover{ background-color: rgba(0, 172, 237, 0.8); }
.modal-content.dark .modal-body .register-social a.fb:hover{ background-color: rgba(59, 89, 152, 0.8); }
.modal-content.dark .modal-body .register-social a.tc:hover{ background-color: rgba(75, 54, 124, 0.8); }

.modal-content.dark .modal-footer{ background-color: rgba(0, 0, 0, 0.2); clear: both; padding: 5%; box-shadow: none  }
.modal-content.dark .modal-footer input[type="submit"]{ background-color: rgba(30, 150, 210,1); border: 0; color: white; font-size: 24px; width: 100%; line-height: 50px; }
.modal-content.dark .modal-footer input[type="submit"]:hover{ background-color: rgba(30, 150, 210,0.8); }

.modal-content.light { background-color: rgba(230,230,230,1); border-radius: 1px; }
.modal-content.light .modal-body{ position: relative; padding: 10%; float: left; width: 100%; overflow: hidden; }
.modal-content.light .modal-header h3 { margin: 0; padding: 0; font-weight: normal; font-size: 16px; color: rgb(255, 255, 255); text-align: center;}
.modal-content.light .modal-body .register-social{ float: left; margin: 10px 0; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.modal-content.light .modal-body .register-social i{ color: white; margin-right: 8px; }
.modal-content.light .modal-body .register-social a.go{ float: right; box-sizing: border-box; background-color:rgba(221, 75, 57, 1); width: 100%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.light .modal-body .register-social a.st{ float: left; box-sizing: border-box; background-color:rgba(35, 31, 32, 1); width: 100%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.light .modal-body .register-social a.tw{ float: left; box-sizing: border-box; background-color:rgba(0, 172, 237, 1); width: 100%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.light .modal-body .register-social a.fb{ float: right; box-sizing: border-box; background-color:rgba(59, 89, 152, 1); width: 100%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.light .modal-body .register-social a.tc{ float: right; box-sizing: border-box; background-color:rgba(75, 54, 124, 1); width: 100%; line-height: 40px; padding: 0 4%; margin: 0 0 20px 0; color: white; }
.modal-content.light .modal-body .register-social a.go:hover{ background-color: rgba(221, 75, 57, 0.8); }
.modal-content.light .modal-body .register-social a.st:hover{ background-color: rgba(35, 31, 32, 0.8); }
.modal-content.light .modal-body .register-social a.tw:hover{ background-color: rgba(0, 172, 237, 0.8); }
.modal-content.light .modal-body .register-social a.fb:hover{ background-color: rgba(59, 89, 152, 0.8); }
.modal-content.light .modal-body .register-social a.tc:hover{ background-color: rgba(75, 54, 124, 0.8); }




/*============================================================================================================================
==============================================================================================================================
=======================================================   profil   ======================================================
==============================================================================================================================
============================================================================================================================*/

/* form */

.modal-select, .modal-input{ margin: 10px; line-height: 28px; }
.modal-select span:first-child, .modal-input span:first-child{ width: 35%; margin-right: 5%; display: inline-block; }
.modal-select span:last-child, .modal-input span:last-child{ width: 60%; display: inline-block; float: right; }

.modal-select select{ box-shadow: 0 0 0 2px rgb(230, 230, 230); border: none; padding: 3px; margin: 2px; font-size: 14px; }
.modal-input input[type="text"]{ box-shadow: 0 0 0 2px rgb(230, 230, 230); border: none; padding: 0px 8px; margin: 2px; outline: none; width: 94%; line-height: 24px; font-size: 14px; }


/* game played */
.modal-game-option { padding: 30px 0 0 0; }
.modal-game-option>p:first-child{ display: flex; width: 100%; justify-content: space-between; }
.modal-game-option .btn.st{ background-color: #363435; color: white; padding: 10px; border-radius: 4px; font-weight: 600; }
.modal-game-option .btn.st i{ color: white; }
.modal-game-option .btn.bl{  }
.modal-game-option .btn.bl i{ color: white; }
.modal-game-option input[name="addgame"]{ padding: 10px; background-color: white; }
.modal-game-option input[name="searchgame"]{ margin: 0px auto 50px; display: block; padding: 10px; width: 300px; background-color: white; }

    
.modal-game-add .steam-game span{ background-color: #fa5a5a; color: white; padding: 10px; border-radius: 3px;}
.modal-game-add input{ margin: 15px 0; display: block; padding: 10px; width: 300px; }


.modal-game-filter{ padding: 0 0 30px 0; }
.modal-game-filter input{ box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); padding: 10px; width: 250px; background-color: white !important; }
.modal-game-list{ padding: 10px; overflow: auto; max-height: 500px; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 5px 1px rgb(220, 220, 220); }

.modal-game{ float: left; padding: 8px; width: 20%; box-sizing: border-box; }
.modal-game span{ padding: 5%; width: 90%; display: inline-block; background-color: rgb(30, 150, 210); color: white; }
.modal-game img{ width: 100%; display: block; object-fit: cover; }
.modal-game input[type=checkbox].css-checkbox-input{ display:none; }
.modal-game input[type=checkbox].css-checkbox-input + label.css-checkbox-label{ padding: 5px; width: 100%; display: inline-block; box-sizing: border-box; background-repeat: no-repeat; background-position: 0 0; font-size: 15px; vertical-align: middle; cursor: pointer; }
.modal-game input[type=checkbox].css-checkbox-input + label.css-checkbox-label:hover{ box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3); }
.modal-game input[type=checkbox].css-checkbox-input:checked + label.css-checkbox-label{ box-shadow: 0 0 0 5px rgb(125,180,0) !important; color: white !important; opacity: 1 !important; }
.modal-game input[type=checkbox].css-checkbox-input:disabled + label.css-checkbox-label{ opacity: 0.4; }



/* stream s */
.modal-stream{    padding: 10px; }



/* couverture */
#preview-cover-profile img{ width: 100% ; }


/* FRIEND */
.modal-body #results_friend_modal .friend{ position: relative; margin: 20px 0 0 0; float: left; width: 100%; }
.modal-body #results_friend_modal .friend .img{ width: 50px; height: 50px; float: left; }
.modal-body #results_friend_modal .friend .img img{ width: 100%; height: 100%; float: left; border-radius: 100%; }
.modal-body #results_friend_modal .friend p{ margin-left: 12%; padding-left: 3%; line-height: 15px; }
.modal-body #results_friend_modal .friend .p1{ font-weight: bold; margin-top: 10px; } 
.modal-body #results_friend_modal .friend .p2{ color: rgb(130, 160, 190); font-size: 12px; } 
.modal-body #results_friend_modal .friend .p3{ margin: 10px; position: absolute; right: 0; top: 0; }    
.modal-body #results_friend_modal .friend .p3 .button-message .small { display: none; }

/*============================================================================================================================
==============================================================================================================================
=======================================================   Page   =============================================================
==============================================================================================================================
============================================================================================================================*/


/* Member */
.form-member{ line-height: 30px; float: left; padding: 2%; margin: 5px 4% 0 4%; width: 92%; background-color: rgba(0, 0, 0, 0.05); }
.form-member select{ border: none; padding: 5px 3px; background-color: transparent; font-weight: bold; color: rgb(30, 150, 210); }
.form-member select:hover{ background-color: rgb(235, 235, 235); }
.form-member .picture{ float: left; }
.form-member .picture img{ border-radius: 100%; width: 30px; display: block; object-fit: cover; height: 30px; }
.form-member .name{ margin-left: 25px; float: left; font-weight: bold; }
.form-member .access{ float: right; color:rgb(30, 150, 210); font-weight: bold; } 

#page_member_results .results{ padding: 2% 0; background-color: rgba(245,245,245,1); width: 100%; margin: 5px 0 0 0; box-shadow: 0 0 3px 0 rgb(200, 200, 200); float: left; }
#page_member_results .results .user{ margin: 2% 4%; position: relative; float: left; width: 92%;}
#page_member_results .results .user p { margin-left: 60px; padding-left: 20px; line-height: 20px; }
#page_member_results .results .user .img-user { float: left; }
#page_member_results .results .user .img-user img { width: 60px; border-radius: 100%; height: 60px; float: left; }
#page_member_results .results .user .p1 { font-weight: bold; margin-top: 10px; }
#page_member_results .results .user .p2 { color: rgb(150, 150, 150); font-size: 12px; }
#page_member_results .results .user .p3 { position: absolute; right: 0; line-height: 60px; top: 0; }
#page_member_results .results .user:hover .p2 { color: rgb(0, 0, 0); }

/*============================================================================================================================
==============================================================================================================================
=======================================================   supprimer   ========================================================
==============================================================================================================================
============================================================================================================================*/ 
.modal .form-remove p{ text-align: center; }  
.modal .form-remove p{ padding: 30px 0; font-weight: bold; }
.modal .form-remove a{ padding: 5px 10px; }
.modal .form-remove a:first-child{ color: white; background-color: rgba(30,150,210,1); }
.modal .form-remove input[type=radio].css-radio-input{ display:none; }
.modal .form-remove input[type=radio].css-radio-input + label.css-radio-label{ padding:2%; width: 96%; display:inline-block; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; }
.modal .form-remove input[type=radio].css-radio-input + label.css-radio-label:hover{ background-color: rgba(150,150,150,1); }
.modal .form-remove input[type=radio].css-radio-input:checked + label.css-radio-label{ background-color: rgb(30, 150, 210) !important; color: white !important; opacity: 1 !important; }
.modal .form-remove input[type=radio].css-radio-input:disabled + label.css-radio-label{ opacity: 0.4; }



/*============================================================================================================================
==============================================================================================================================
=======================================================   Page   =============================================================
==============================================================================================================================
============================================================================================================================*/


.modal-page{ float: right; width: 230px; position: relative; background-color: rgb(255, 255, 255); -webkit-background-clip: padding-box; background-clip: padding-box; border-radius: 1px; outline: 0; margin: 20px 0; -webkit-box-shadow: 0 0px 8px rgba(0,0,0,.5); box-shadow: 0 0px 8px rgba(0,0,0,.5); }
.modal-page .image{ margin: 20px;}
.modal-page .image img{ width: 100%; display: block;}
.modal-page .name{ text-align: center; font-weight: bold;}
.modal-page .button{}
.modal-page .name{}
.modal-page .name{}

.modal-post{  margin: 0 0 40px 0; }
.modal-post .post{}
.modal-post .post .title{ font-size: 35px; text-align: center; padding: 30px; line-height: 40px; }
.modal-post .post .image{ width: 100%; overflow: hidden; }
.modal-post .post .image img{ margin: 0px auto; display: block; width: 100%; }
.modal-post .post .date{ line-height: 60px; margin: 0 30px; font-size: 12px; }
.modal-post .post .date .d-2{ display: none; }
.modal-post .post .date:hover .d-1{ display: none; }
.modal-post .post .date:hover .d-2{ display: inline-block; }
.modal-post .post .desc{ font-family: arial; margin: 0 30px; padding: 30px 0; border-top: 2px solid rgb(240, 240, 240);}
.modal-post .post .link{ text-align: center; margin-bottom: 20px; }
.modal-post .post .link a{ padding: 10px; display: inline-block; margin: auto; color: white; background-color: rgba(30,150,210,1); }
.modal-post .post .link a:hover{ background-color: rgba(30,150,210,0.9); }
.modal-post .post .command{ line-height: 50px; }
.modal-post .post .comment{}
.modal-post .post .share{}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* The switch - the box around the slider */
.mmodal .label-switch { display: inline-block; width: 60px; height: 26px; float: right; position: absolute; right: 0; top: 15px; }
.mmodal .desc-switch { color: rgb(99, 99, 99); font-size: 13px; padding-right: 65px; padding-bottom: 10px;}

/* Hide default HTML checkbox */
.modal .label-switch input {display:none;}

/* The slider */
.modal .slider { display: inline-block; }
.modal .slider .btn { display: inline-block; width: 60px; height: 26px; float: right; position: absolute; right: 0; top: 30px; cursor: pointer; left: 0; bottom: 0; background-color: rgb(200, 200, 200); transition: .4s; }
.modal .slider .btn:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.modal .slider .txt { padding-left: 70px; padding-left: 70px; color: rgb(99, 99, 99); font-size: 11px; padding-bottom: 10px; }
.modal .slider .txt.one { display: block; }
.modal .slider .txt.two { display: none; }
.modal input:checked + .slider .btn { background-color: #2196F3; }
.modal input:checked + .slider .btn:before { -webkit-transform: translateX(34px); -ms-transform: translateX(34px); transform: translateX(34px); }
.modal input:checked + .slider .txt.one { display: none; }
.modal input:checked + .slider .txt.two { display: block; }
.modal input:focus + .slider .btn{ box-shadow: 0 0 1px #2196F3; }

/* Rounded sliders */
.modal .slider .btn.round { border-radius: 34px; }
.modal .slider .btn.round:before { border-radius: 50%; }