/*
 


 *********************************************************************************************************************************************
 *                                   ========== Magnet Framework Tools and Style ==========                                                  *
 *********************************************************************************************************************************************

 ******************************************************* BEGIN LICENSE BLOCK *****************************************************************
 *                                                                                                                                           *       
 *                                 ---             ---             -  	          -----------------                                          *
 *                                 ----           ----            ---	         /-----------------\                                         *
 *                                 -----         -----           -----	         -------------------                                         *
 *                                 ------       ------          -------	         ---                                                         *
 *                                 -------     -------         ---------	     ---                                                         *
 *                                 --------   --------    	  ----/ \----	     ---    ----                                                 *
 *                                 --- ----- ----- ---   	 ----/   \----       ---    -  ----------                                        *
 *                                 ---  ---------  ---  	---------------      ---    -  ----------                                        *
 *                                 ---   -------   ---	   ------   --------     ---    ----      ---                                        *
 *                                 ---    -----    ---    ------     --------    -------------------                                         *
 *                                 ---     ---     ---   ------       --------   \----------------/                                          *
 *                                 ---      -      ---  ------         --------   ----------------                                           *
 *                             =========================================================================                                     *
 *                                                                                                                                           *
 *                                                                                                                                           *
 * Distributed under the BSD license:                                                                                                        *
 *                                                                                                                                           *
 * Copyright (c) 2019,  Mostafa Mahmoud El-sherbiniy , mostafa201272@yahoo.com , https://www.facebook.com/Eng.Moustafa.Mahmoud.Elsherbiniy.  *
 * All rights (R) reserved .                                                                                                                 *
 *                                                                                                                                           *
 * Redistribution and use in source and binary forms, with or without                                                                        *
 * modification, are permitted provided that the following conditions are met:                                                               *
 *     * Redistributions of source code must retain the above copyright                                                                      *
 *       notice, this list of conditions and the following disclaimer.                                                                       *
 *     * Redistributions in binary form must reproduce the above copyright                                                                   *
 *       notice, this list of conditions and the following disclaimer in the                                                                 *
 *       documentation and/or other materials provided with the distribution.                                                                *
 *     * Neither the name of Ajax.org B.V. nor the                                                                                           *
 *       names of its contributors may be used to endorse or promote products                                                                *
 *       derived from this software without specific prior written permission.                                                               *
 *                                                                                                                                           *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND                                                           *
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED                                                             *
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE                                                                    *
 * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY                                                                             *
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES                                                                *
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;                                                              *
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND                                                               *
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT                                                                *
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS                                                             *
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.                                                                              *
 *                                                                                                                                           *
 * ********************************************************* END LICENSE BLOCK ***************************************************************

 */



/*
    ***********************************************************************
    ======              Start Of Main Options                       =======
    ***********************************************************************
*/
* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Droid Sans', sans-serif;
    outline: none;
}
/* Chrome , Safarie  , opera , MS Explorer*/
::-webkit-scrollbar{
    background: transparent;
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb{
    background-color: #aaa;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:focus{
    background-color: #aaa;
}
::-webkit-scrollbar-thumb:hover{
  background-color: #aaa;
}
body{
    min-height: 100vh;
    position: relative;
}

/*
    ***********************************************************************
    ======              End Of Main Options                         =======
    ***********************************************************************
*/


/* 
    ****************************************************************************
    =======                      Start Of Side Nav Bar                   =======
    ****************************************************************************
*/

/* Magnet Side Bar Body */
.Magnet-SideNav-Body{
    min-height: 100vh;
    position: relative;
}
.Magnet-sidebar{
    width: 260px;
    height: 100%;
    display: block;
    font-weight: 200;
    overflow-y: scroll;
    overflow-x: hidden;
}
.Magnet-Page-Body-light,
.Magnet-Frame-Light-BGcolor{
    background-color: #fbf9fa;
}
.Magnet-Page-Body-dark,
.Magnet-Frame-Dark-BGcolor{
    background-color: #121212;
}

/* Side Nav Bar Head */
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-heading {
  background-color: transparent;
  padding: 20px 0px 10px 0px;
  overflow: hidden;
  margin-bottom: 5px;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-heading .Magnet-img {
    border-radius: 50%;
    width: 50%;
    transform: translate(50%);
    display: block;
    margin-bottom: 10px;
    padding: 5px;
    
}
/* Side Nav Bar Header Brand*/
.Magnet-brand-logo{
    width: 50%;
    display: block;
    transform: translate(50%);
    font-size: 120px;
}
.Magnet-brand-logo-light-Color{
    color: #fff;
}
.Magnet-brand-logo-dark-Color{
    color: #111;
}
.Magnet-brand-span,
.Magnet-brand-span-dark{
    color: #111;
    font-weight: 900;
    font-size: 30px;
    text-shadow: 5px 5px 5px #ccc;
}
.Magnet-brand-span-dark{
    color: #fff;
    text-shadow: 0px 5px 5px #000;
}

/* Side Nav Bar Lists */
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories{
    padding-left: 0px;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .Magnet-categories-List{
    position: relative;
    width: 100%;
    padding:10px;
    margin-top: 5px;
    overflow: hidden;
    cursor: pointer;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .Magnet-categories-List .Magnet-ListHeader .Magnet-ListHeader-title{
    font-size: 14px;
    font-weight: 700;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .Magnet-categories-List .Magnet-ListHeader .Magnet-ListHeader-dropArrow{
    position: absolute;
    left: 215px;
    top: 11px;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .opend {
    transition: all 0.5s ease-in-out;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .opend .Magnet-ListHeader-dropArrow{
    transform: rotate(-90deg);
}

/* Start dropdown menu */
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .Magnet-CatList-dropMenu {
    list-style: none;
    display: none;
    padding-top: 5px;
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .Magnet-CatList-dropMenu .Magnet-CatMenu{  
    padding:5px 20px;
    transition: all 0.3s ease-in-out;
    position: relative
}
.Magnet-sidebar .Magnet-sidebar-wrapper .Magnet-categories .Magnet-CatList-dropMenu .Magnet-CatMenu .Magnet-CatMenu-Counter{
    padding: 2px 5px;
    border-radius: 0px 10px;
    font-size: 12px;
    position: absolute;
    left: 205px;
}

/* Side nav bar Media [ small Screens ] */
@media (max-width: 991px) {
    .Magnet-sidebar {
        left: 0 !important;
        right: auto;
        transform: translate3d(-262px, 0, 0) !important;
        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }
    .nav-open .Magnet-sidebar{
        transform: translate3d(0px, 0, 0) !important;
        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }
      
}


/* 
    ****************************************************************************
    =======                      End Of Side Nav Bar                     =======
    ****************************************************************************
*/


/* 
    ****************************************************************************
    =======                Start Of Magnet Main Body                     =======
    ****************************************************************************
*/

/* Main Panal [ Page Content ] */
.Magnet-main-panel-sidenav{   
    position: relative;
    float: right;
    width: calc(100% - 260px);
    min-height: 100%;
}

/* ==== Magnet Main Panel Top and Bottom Navs  ========== */
.Magnet-main-panel-sidenav .Magnet-TopNav,
.Magnet-main-panel-sidenav .Magnet-BottomNav{
    padding: 10px;
    text-align: center;
    width: 100%;
    min-height: 50px;

}
.Magnet-main-panel-sidenav .Magnet-TopNav button{
    float: left;
    border: 0px;
    padding: 5px 10px;
    display: none;
    

}
.Magnet-main-panel-sidenav .Magnet-TopNav button:focus{
    outline: 0px auto #343a40;
}

/* Navbar Top Or Bottom Brand */
.Magnet-Navbar-brand-logo{
    display: inline-block;
    font-size: 20px;
}
.Magnet-Navbar-brand-Title{
    display: inline-block;
    
}
.Magnet-Navbar-dark-brand-span,
.Magnet-Navbar-light-brand-span{
    color: #111;
    font-size: 20px;
    font-weight: 900;
    text-shadow: 0px 2px 3px #ccc;
}
.Magnet-Navbar-light-brand-span{
    color: #fff;
    text-shadow: 0px 5px 5px #000;
}

/* Magnet Frame */
.Magnet-main-panel-sidenav .Magnet-Multi-Nav-Frame{
    position: relative;
    top: 50px;
    width: 100%;
    height: calc(100vh - 100px);
    overflow-x: scroll;
    overflow-y: scroll;
    z-index: 1;
}
/* Magnet Frame */
.Magnet-main-panel-sidenav .Magnet-Multi-Nav-Frame .Magnet-Multi-Nav-Frame-Preview-Box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 5px 10px;
}

/*  Magnet Main Panal Media [ Small Screen ] */
@media (max-width: 991px) {   
    .nav-open .Magnet-main-panel-sidenav{
        position: absolute;
        right: 0;
        transform: translate3d(250px, 0, 0) !important;
        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }
    
    .Magnet-main-panel-sidenav{
        width: 100%;
    }
    
    .Magnet-main-panel-sidenav .Magnet-TopNav button{
        display: inline-block;
    }

}


/* 
    ****************************************************************************
    =======                  End Of Magnet Main Body                     =======
    ****************************************************************************
*/

/* 
    ****************************************************************************
    =======        Start Of Magnet Navigations Menus                     =======
    ****************************************************************************
*/

/* [ 1 ] Magnetic System Menus  */
.Magnet-Navbar-Sys-Btn,
.Magnet-Bottom-Nav-Generated-Menu{
    list-style: none;
    display: inline-block;
    margin-right: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.Magnet-Navbar-Sys-Btn .Magnet-Navbar-btn,
.Magnet-Navbar-Sys-Btn .Magnet-Navbar-dark-btn{
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    background-color: #fd0054;
    border-radius: 50px;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.Magnet-Navbar-Sys-Btn .Magnet-Navbar-btn:hover{
    box-shadow: 0px 2px 4px #ccc;
    transform: scale(1.05)
}
.Magnet-Navbar-Sys-Btn .Magnet-Navbar-dark-btn:hover{
    box-shadow: 0px 5px 5px #000;
    transform: scale(1.05)
}
.Magnet-Nav-Generated-Menu-links{
    display: inline-block;
    margin-right: 10px;
    font-size: 10px;
    font-weight: 600;
}
.Magnet-Nav-Generated-Menu-links span{
    color: #fd0054;
}


/* 
    ****************************************************************************
    =======          End Of Magnet Navigations Menus                     =======
    ****************************************************************************
*/



/* 
    ****************************************************************************
    =======                  Start Of ToolBox Options                    =======
    ****************************************************************************
*/
.Magnet-ToolBox{
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}
.Vertical-Box-Options{
    width: 300px;
}
.Horizontal-Box-Options{
    width: 90%;
}

/* Header*/
.Magnet-ToolBox .Magnet-ToolBox-Header,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header{
    width: 100%;
    height: 20px;
    background-color: #111;
    color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 2px 15px;
}

.Magnet-ToolBox .Magnet-ToolBox-Header div,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header div,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header div{
    display: inline-block;
}

.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-title,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-title,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-title{
    font-size: 12px;
    font-weight: 700;
    float: left;
}

.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls{
    
    color: #fff;
    font-size: 8px;
    float: right;
    position: absolute;
    right: 10px;
    top: 5px;
}

.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls div,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls div,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls div{
    margin-left: 2px;
    cursor: pointer;
}

.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-Minimise,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-Minimise,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-Minimise{
    margin-right: 3px;
    background-color: #ffc107;
    padding: 0px 2px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    color: #ffc107;
}


.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-Minimise:hover,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-Minimise:hover,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-Minimise:hover{
    color:#111;
}

.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-close,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-close,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-close{
    background-color: #F44336;
    padding: 0px 3px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    color: #F44336;
}


.Magnet-ToolBox .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-close:hover,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-close:hover,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Header .Magnet-ToolBox-Header-Controls .Magnet-ToolBox-Header-Controls-close:hover{
    color:#111;
}

/* Body */
.Magnet-ToolBox  .Magnet-ToolBox-Body{
    width: 100%;
    max-height: 90vh;
    overflow-y: scroll;
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
}

/* Body Inputs */

    /* [ 1 ] Just input */
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-inputs{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-inputs .txtinput{
    width: 100%;
    height: 25px;
    padding: 2px 10px;
    font-size: 12px;
    border: 0px solid #000;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    color: #fff;
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-inputs .txtinput::placeholder{
    color: #e1e1e1;
}
    
    /* [ 2 ] input with lable */

.Magnet-ToolBox  .Magnet-ToolBox-Body .input-lable{
   display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .input-lable .Boxlbl{
    margin-left: 10px;
    font-weight: 700;
    color: #fff;
}

    /* [ 3 ]  Menu */
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-menu{
    width: 100%;
    font-size: 12px;
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-menu ul{
    list-style: none;
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-menu ul .Magnet-ToolBox-menu-option-Box{
    padding: 3px 10px;
    background: linear-gradient(to top , rgba(0,0,0,.9) , #495057);
    border-radius: 20px;
    color: #fff;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-menu ul .Magnet-ToolBox-menu-option-Box .Magnet-option-Box-Header-dropArrow{
    position: absolute;
    right: 5%;
    
}
.Magnet-ToolBox  .Magnet-ToolBox-Body .Magnet-ToolBox-menu ul .Magnet-option-Box-dropMenu{
    display: none;
    width: 100%;
    background-color: #212529;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.border-edit-radius{
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
.arrow-rotate{
    transform:rotate(-90deg);
}


    /* [ 4 ] Options */
.Magnet-ToolBox-inputs .Option{
    background: linear-gradient(to top,#495057 ,#343a40);
    border-radius: 20px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: 0.5s;
}
.Magnet-ToolBox-inputs .Option:hover{
    background: linear-gradient(to top,#fd0054 ,#fd0054);
}

/* Footer */
.Magnet-ToolBox  .Magnet-ToolBox-footer,
.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-footer,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-footer{
    width: 100%;
    height: 15px;
    background-color: #111;
    color: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 2px 15px;
    font-size: 10px;
    text-align: center;
}

/* Super Panal */
.Magnet-super-panale{
    width: 90%;
    height: 90%;
    position: fixed;
    top: 2.5%;
    left: 5%;
}
.Magnet-super-panale .Super-Box-Options-leftPanal{
    width: 300px;
    height: 100%;
    float: left;
}
.Magnet-super-panale .Super-Box-Options-rightPanal{
    width: calc(100% - 310px);
    height: 100%;
    float: right;
}

.Magnet-super-panale .Super-Box-Options-leftPanal .Magnet-ToolBox-Body,
.Magnet-super-panale .Super-Box-Options-rightPanal .Magnet-ToolBox-Body{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: relative;
}

/* Applay Button */
.Magnet-ToolBox .Magnet-ToolBox-Body .Magnet-ToolBox-Btn{
    width: 100%;
    padding: 5px 10px;
    margin-top: 10px;
    background: linear-gradient(to top , #343a40 , #495057);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
}
.Magnet-ToolBox .Magnet-ToolBox-Body .Magnet-ToolBox-Btn:hover{
    background: linear-gradient(to top , #383d41 , rgba(0,0,0,.9));
}


/* 
    ****************************************************************************
    =======                    End Of ToolBox Options                    =======
    ****************************************************************************
*/

/* 
    ****************************************************************************
    =======                Start Of Buttons Style                       =======
    ****************************************************************************
*/


/* Start of curtain button */
.Magnet-btn{
    display: inline-block;
    padding:5px 10px;
    margin: 10px;
    cursor: pointer;
    transition: 0.5s;
    
}
.Magnet-btn-curtain{
    border: 1px solid #2196f3;
    font-size: 16px;
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
    
}
.Magnet-btn-curtain::before{
    content: "";
    position: absolute;
    left: 0px;
    height: 0%;
    width: 100%;
    background-color: #2196f3;
    z-index: -1;
    transition: 0.5s;
}

.curtain-1,
.curtain-2,
.curtain-3:hover,
.curtain-4:hover{
    color: #2196f3;
}
.curtain-1:hover,
.curtain-2:hover,
.curtain-3,
.curtain-4{
    color: #fff;
}

.curtain-1::before,
.curtain-3::before{
    top: 0px;
    border-radius: 0 0 50% 50%;
}

.curtain-2::before,
.curtain-4::before{
    bottom: 0px;
    border-radius: 50% 50% 0 0;
}

.curtain-3::before,
.curtain-4::before{
    height: 180%;
}

.curtain-1:hover::before,
.curtain-2:hover::before{
    height: 180%;
}

.curtain-3:hover::before,
.curtain-4:hover::before{
    height: 0%;
}
/* end of curtain button */

/* Start of loading button */
.Magnet-btn-loading{
    background-color: #03a9f4;
    color: #fff;
    padding: 10px 30px;
    font-size: 30px;
    box-shadow: 0px 20px 50px rgb(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.Magnet-btn-loading span:nth-child(1){
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right , #0c002b, #1779ff);
    animation: topSpanMotion 1s ease-in-out infinite;
}
@keyframes topSpanMotion{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}
.Magnet-btn-loading span:nth-child(2){
    position: absolute;
    top: 0px;
    right:0px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom , #0c002b, #1779ff);
    animation: rightSpanMotion 1s ease-in-out infinite;
    
}
@keyframes rightSpanMotion{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%);
    }
}
.Magnet-btn-loading span:nth-child(3){
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left , #0c002b, #1779ff);
    animation: bottomSpanMotion 1s ease-in-out infinite ;
}
@keyframes bottomSpanMotion{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}
.Magnet-btn-loading span:nth-child(4){
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top , #0c002b, #1779ff);
    animation: leftSpanMotion 1s ease-in-out infinite;
}
@keyframes leftSpanMotion{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%);
    }
}

.Magnet-btn-loading span.start{
    animation-direction: normal;
}
.Magnet-btn-loading span.start-end{
    animation-direction: alternate-reverse;
}
.Magnet-btn-loading span.circle{
    animation-delay: 0.5s;
}

/* end of loading button */

/* Start Of Open button */
.Magnet-btn-open{
    position: relative;
    color: #03a9f4;
    font-size: 20px;
    padding: 10px 30px;
    border: 2px solid #03a9f4;
    transition:all 0.5s ease-in-out; 
    overflow: hidden;
    background-color: transparent;
}
.Magnet-btn-open:hover{
    color: #fff;
}
.Magnet-btn-open::before{
    content: "";
    position: absolute;
    background-color: #03a9f4;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    transition:all 0.5s ease-in-out; 
}
.open-1::before{
    width: 0px;
    height: 100%;
}
.open-1:hover::before{
    width: 100%;
}

.open-2::before{
    width: 100%;
    height: 0px;
}
.open-2:hover::before{
    height: 100%;
}

.open-3::before{
    width: 100%;
    height: 0px;
    transform: translate(-50%,-50%) rotate(45deg);
}
.open-3:hover::before{
    height: 500%;
}

.open-4::before{
    width: 100%;
    height: 0px;
    transform: translate(-50%,-50%) rotate(-45deg);
}
.open-4:hover::before{
    height: 500%;
}

/* end Of Open button */

/* Start Of 3Ds button */
.Magnet-btn-3d{
    position: relative;
    color: #03a9f4;
    padding: 20px 20px 20px 30px;
    font-size: 20px;
    letter-spacing: 5px;
    transform: 0.5s;
}
.Magnet-btn-3d:hover{
    background-color: #03a9f4;
    color: #fff;
    box-shadow: -30px 3px 50px rgba(0,0,0,0.4);
    
    transition-delay: 0.5s;
}
.Magnet-btn-3d::before,
.Magnet-btn-3d::after{
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: #03a9f4;
    transition: 0.5s;
}
.Magnet-btn-3d::before{
    top: 0px;
    left: 0px;
}
.Magnet-btn-3d::after{
    top: 0px;
    right: 0px;
}
.Magnet-btn-3d:hover::before{
    width: 100%;
    opacity: 0.4;
    transform: translate(5px, -5px);
    box-shadow: +2px 2px 2px rgba(0,0,0,0.5);
    transition-delay: 0s, 0.5s, 1s,1.5s;
}
.Magnet-btn-3d:hover::after{
    width: 100%;
    opacity: 0.1;
    transform: translate(10px, -10px);
    box-shadow: +2px 2px 2px rgba(0,0,0,0.5);
    transition-delay: 0s, 0.5s, 1s,1.5s;
}


.btn-3D-left-rotat:hover{
    transform: rotate(-30deg) skew(25deg);
}
.btn-3D-right-rotat:hover{
    transform: rotate(30deg) skew(-25deg);
}

/* End Of 3Ds button */

/* Start of Poly button */
.Magnet-btn-Poly{
    position: relative;
    padding: 15px 60px;
    font-size: 25px;
    border-radius: 35px;
    overflow: hidden;
    
}
.Magnet-btn-Poly:hover{
    color: #fff;
    transition-delay: 1s;
}

.Magnet-btn-Poly::before,
.Magnet-btn-Poly::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition-delay: 0s,0s;
    transition-duration: 1s , 0.5s;
}
.Magnet-btn-Poly::before{
    left: 20%;
    transition-property: left , transform;
}
.Magnet-btn-Poly::after{
    right: 20%;
    transition-property: right , transform;
}
.Magnet-btn-Poly:hover::before{
    left: 10px;
    transform: translateY(-50%) scale(30);
    transition-delay: 0s,1s;
    opacity: 1;
}
.Magnet-btn-Poly:hover::after{
    right: 10px;
    transform: translateY(-50%) scale(30);
    transition-delay: 0s,1s;
    opacity: 1;
}

.Poly{
    border-bottom:2px solid #e91e63;
    border-right:2px solid #e91e63;
    border-top:2px solid #111;
    border-left:2px solid #111; 
    color: #111;
}
.Poly::before{
    background-color: #111;
}
.Poly::after{
    background-color: #e91e63;
}
.Poly:hover::after{
    transform: translateY(-50%) scale(20);
}

/* End of Poly button */

/* Start of Sells button*/
.Magnet-btn-sells{
    font-size: 20px;
}
.Magnet-btn-sells div{
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 60px;
    overflow: hidden;
}
.Magnet-btn-sells div:nth-child(1){
    width: 150px;
    height: 60px;
}
.Magnet-btn-sells div:nth-child(2){
    width: 60px;
    height: 60px;
}
.Magnet-btn-sells div:nth-child(1) div,
.Magnet-btn-sells div:nth-child(2) div{
    width: 100%;
    height: 100%;
    position: relative;
}
.Magnet-btn-sells div:nth-child(1) div::before,
.Magnet-btn-sells div:nth-child(2) div::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: 0.5s;
}
.Magnet-btn-sells:hover div:nth-child(1) div::before{
    transform: translateX(-100%);
}
.Magnet-btn-sells:hover div:nth-child(2) div::before{
    transform: translateX(100%);
}
.Magnet-btn-sells div span{
    position: relative;
    transition: 0.2s;
}


.Sell .Sell-title{
    background-color: #fff;
    border:2px solid #03a9f4;
}
.Sell .Sell-icon{
    background-color: #03a9f4;
    border:2px solid #03a9f4;
}
.Sell .Sell-title::before{
    background-color: #03a9f4;
}
.Sell .Sell-icon::before{
    background-color: #fff;
     
}
.Sell div:nth-child(1) span{
    color:#fff;
}
.Sell div:nth-child(2) span{
    color:#03a9f4;
}
.Sell:hover div:nth-child(1) span{
    color:#03a9f4;
}
.Sell:hover div:nth-child(2) span{
    color:#fff;
}

/* End of Sells button*/




/* 
    ****************************************************************************
    =======                     End Of Buttons Style                    =======
    ****************************************************************************
*/



/*
    ***********************************************************************
    ======              Start Of Editor Panal                         =======
    ***********************************************************************
*/
.Magnet-Editor{
    width: 80%;
    height: 80vh;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.Magnet-Editor-header,
.Magnet-Editor-footer{
    width: 100%;
    height: 30px;
    background-color: #111;
    color: #fff;
    text-align: center
}
.Magnet-Editor-header{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.Magnet-Editor-footer{
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.Magnet-Editor-header > div{
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px;
}
.Magnet-Editor-header div{
    display: inline-block;
}
.Magnet-Editor-header .Title{
    margin-top: 5px;
}
.Magnet-Editor-header .Controls{
    float: right;
    margin-top: 5px;
}
.Magnet-Editor-header .Controls .Magnet-ToolBox-Header-Controls-Minimise{
    margin-right: 5px;
    background-color: #ffc107;
    padding: 0px 3px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    color: #ffc107;
}
.Magnet-Editor-header .Controls .Magnet-ToolBox-Header-Controls-close{
    background-color: #F44336;
    padding: 0px 5px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    color: #F44336;
}
.Magnet-Editor-header .Controls > div{
    font-size: 12px;
    font-weight: 100;
    cursor: pointer;
    transition: 0.5s;
}
.Magnet-Editor-header .Controls > div:hover{
    color: #111
}
.Magnet-Editor-body{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 90%;
}
.Editor{
    width: 100%;
    height: 100%;
}
/*
    ***********************************************************************
    ======              End Of Editor Panal                         =======
    ***********************************************************************
*/


/* 
    ****************************************************************************
    =======        Start Of Magnet System Sliders                        =======
    ****************************************************************************
*/

/*
.Magnet-Slider{
    width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
}
.Magnet-Slider .Magnet-Slider-back{
    width: 100%;
    height: 100%;
    padding: 5%;
    background: url(../imgs/b.png) no-repeat center center;
    background-size: cover;
    background: linear-gradient(45deg , #343a40,#212529);
}
.Magnet-Slider .Magnet-Slider-back .back-shadow-img{
    position: absolute;
    top:0px;
    right: 0px;
    opacity: 0.05;
    transform: rotateY(180deg);
    
}
.Magnet-Slider .Magnet-Slider-back .back-shadow-img img{
    display: none;
}
.Magnet-Slider .Magnet-Slider-back .back-shadow-img .show-Shadow{
    display: block;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to top,#212529,#343a40);
    box-shadow: 0px 11px 50px rgba(0, 0, 0, 0.9), -10px 0px 50px rgba(0, 0, 0, 0.52)
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .Slides{
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .Slide{
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .activeSlide{
    display: block;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .Slide .img{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .Slide .img img{
    width: 100%;
    height: 100%;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .slid-title{
    position: absolute;
    top: 30%;
    left: 50%;
    color: #fff;
    font-family: 'Lobster', cursive;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .main-title{
    font-size: 50px;
    text-transform: capitalize;
    text-shadow: 0px 0px 50px #ccc;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .slidesPoints{
    position: absolute;
    bottom: 10px;
    left: 50%;
    color: #fff;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .slidesPoints ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .slidesPoints ul li{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
}
.Magnet-Slider .Magnet-Slider-back .Magnet-Slider-front .activePolit{
    background-color: #fff;
}

*/

/* [ 1 ] Swiper 3D Slider [ Personal Card Slider] */

.Magnet-Personal-Card .swiper-container {
  width: 100%;
}
.Magnet-Personal-Card .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 400px;
    background-color: #fff
}

/* [ 2 ] 3Dx Cubic Slider */
.Magnet-Cubic-Slider .swiper-container {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.Magnet-Cubic-Slider .swiper-slide {
    background-position: center;
    background-size: cover;
    background-color: rgba(0,0,0,0.5);
    
}

/* Tow Dimintional Cube */

.Magnet-Slider{
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-container-cube .swiper-slide-active, 
.swiper-container-cube .swiper-slide-active .swiper-slide-active{
    z-index: 2;
}

.Magnet-Horizontal-Cubic-Slider > .swiper-container{
    width: 80%;
    height: 80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.Magnet-Horizontal-Cubic-Slider > .swiper-container > .swiper-wrapper > .swiper-slide{
    background-position: center;
    background-size: cover;
    background-color: rgba(255,255,255,0.5);
}

.Magnet-Vertical-Cubic-Slider .swiper-container{
    width: 80%;
    height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.Magnet-Vertical-Cubic-Slider .swiper-slide{
    height: 100%;
    background-position: center;
    background-size: cover;
    background-color: rgba(0,0,0,0.5);
}



/* 
    ****************************************************************************
    =======        End Of Magnet System Sliders                        =======
    ****************************************************************************
*/

/* 
    ****************************************************************************
    =======        Start Of Magnet System Sections                        =======
    ****************************************************************************
*/

.Magnet-Section{
    width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    position: relative;
    overflow: hidden;
}
.section-pop-card .Magnet-section-back{
    width: 100%;
    height: 100%;
    padding: 5%;
    background: linear-gradient(45deg , #343a40,#212529);
}
.section-pop-card .Magnet-section-back .back-shadow-img{
    position: absolute;
    top:0px;
    right: 0px;
    opacity: 0.05;
    transform: rotateY(180deg);
}
.section-pop-card .Magnet-section-back .back-shadow-img .disable-Shadow{
    display: none;
}
.section-pop-card .Magnet-section-back .Magnet-section-front{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to top,#212529,#343a40);
    box-shadow: 0px 11px 50px rgba(0, 0, 0, 0.9), -10px 0px 50px rgba(0, 0, 0, 0.52)
}
.section-pop-card .Magnet-section-back .Magnet-section-front .Section-Btn{
    position: absolute;
    top: 0px;
    left: 0px;
}

/* Info Card */
.Info-Card{
    padding: 5%;
    height: 100%;
    background-color: #111;
    position: relative;
    overflow: hidden;
}
.Info-Card::before,
.Info-Card::after{
    content: '';
    width: 100%;
    height: 10px;
    z-index: 1;
    position: absolute;
    left: 0px;
    background-color: #fd0054
}
.Info-Card::before{
    top: 0px;
}
.Info-Card::after{
    bottom: 0px;
}
.Info-Card-Container{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/* 
    ****************************************************************************
    =======        End Of Magnet System Sections                        =======
    ****************************************************************************
*/

/* 
    ****************************************************************************
    =======            Start Of Magnet Framework Classes                 =======
    ****************************************************************************
*/

/* Positions Classes*/

    /* [ 1 ][ fixed ] */
.Magnet-fixed-top{
    position: fixed;
    top: 0px;
}
.Magnet-fixed-top-left{
    position: fixed;
    top: 0px;
    left: 0px;
}
.Magnet-fixed-top-right{
    position: fixed;
    top: 0px;
    right: 0px;
}
.Magnet-fixed-bottom{
    position: fixed;
    bottom: 0px;
}
.Magnet-fixed-bottom-left{
    position: fixed;
    bottom: 0px;
    left: 0px;
}
.Magnet-fixed-bottom-right{
    position: fixed;
    bottom: 0px;
    right: 0px;
}
    /* [ 2 ][ absolute ] */
.Magnet-absolute-top{
    position: absolute;
    top: 0px;
}
.Magnet-absolute-top-left{
    position: absolute;
    top: 0px;
    left: 0px;
}
.Magnet-absolute-top-right{
    position: absolute;
    top: 0px;
    right: 0px;
}
.Magnet-absolute-bottom{
    position: absolute;
    bottom: 0px;
}
.Magnet-absolute-bottom-left{
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.Magnet-absolute-bottom-right{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* Z-index Classes */
.Magnet-z-1{
    z-index: 1;
}
.Magnet-z-2{
    z-index: 2;
}
.Magnet-z-3{
    z-index: 3;
}
.Magnet-z-4{
    z-index: 4;
}
.Magnet-z-5{
    z-index: 5;
}
.Magnet-z-6{
    z-index: 6;
}
.Magnet-z-7{
    z-index: 7;
}
.Magnet-z-8{
    z-index: 8;
}
.Magnet-z-9{
    z-index: 9;
}
.Magnet-z-10{
    z-index: 10;
}


/* Backgrounds */
.Magnet-light{
    background-color: #fff;
    color: #111;
}
.Magnet-light-gradient{
    background: linear-gradient(to bottom, #fff 30%, #ffff 100%);
    background-size: cover;
    background-position: center center;
}
.Magnet-dark{
    background-color: #282828fa ;
    color: #fff;
}
.Magnet-dark-gradient{
    background: linear-gradient(to bottom, #282828 30%, #282828 100%);
    background-size: cover;
    background-position: center center;
}

/* Navigrations Shadow*/
.Magnet-light-nav-shadow-top{
    box-shadow: 0px -1px 6px rgba(32,33,36,0.28);
}
.Magnet-light-nav-shadow-bottom{
    box-shadow: 0px 1px 6px rgba(32,33,36,0.28);
}
.Magnet-light-nav-shadow-left{
    box-shadow: -1px 0px 6px rgba(32,33,36,0.28);
}
.Magnet-light-nav-shadow-right{
    box-shadow: 1px 0px 6px rgba(32,33,36,0.28);
}
.Magnet-dark-nav-shadow-top{
    box-shadow: 0px -1px 6px #111;
}
.Magnet-dark-nav-shadow-bottom{
    box-shadow: 0px 1px 6px #111;
}
.Magnet-dark-nav-shadow-left{
    box-shadow: -1px 0px 6px #111;
}
.Magnet-dark-nav-shadow-right{
    box-shadow: 1px 0px 6px #111;
}

/* Images Backgrounds Colors */
.Magnet-Img-Background-red{
    background: linear-gradient(to bottom, #fd0054 30%, #fd0054 100%);
    background-size: cover;
    background-position: center center;
}

/* Magnet Borders */
.Magnet-border-1{
    border: 1px solid rgba(0, 0, 0, 0.3);
}
.Magnet-border-2{
    border: 2px solid rgba(0, 0, 0, 0.3);
}
.Magnet-border-3{
    border: 3px solid rgba(0, 0, 0, 0.3);
}
.Magnet-border-4{
    border: 4px solid rgba(0, 0, 0, 0.3);
}
.Magnet-border-5{
    border: 5px solid rgba(0, 0, 0, 0.3);
}
/* Top + Bottom Borders */
.Magnet-top-bottom-border-1{
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.Magnet-top-bottom-border-2{
    border-top: 2px solid rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}
.Magnet-top-bottom-border-3{
    border-top: 3px solid rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}
.Magnet-top-bottom-border-4{
    border-top: 4px solid rgba(0, 0, 0, 0.3);
    border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}
.Magnet-top-bottom-border-5{
    border-top: 5px solid rgba(0, 0, 0, 0.3);
    border-bottom: 5px solid rgba(0, 0, 0, 0.3);
}
/* Left + Right Borders */
.Magnet-left-right-border-1{
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.Magnet-left-right-border-2{
    border-left: 2px solid rgba(0, 0, 0, 0.3);
    border-right: 2px solid rgba(0, 0, 0, 0.3);
}
.Magnet-left-right-border-3{
    border-left: 3px solid rgba(0, 0, 0, 0.3);
    border-right: 3px solid rgba(0, 0, 0, 0.3);
}
.Magnet-left-right-border-4{
    border-left: 4px solid rgba(0, 0, 0, 0.3);
    border-right: 4px solid rgba(0, 0, 0, 0.3);
}
.Magnet-left-right-border-5{
    border-left: 5px solid rgba(0, 0, 0, 0.3);
    border-right: 5px solid rgba(0, 0, 0, 0.3);
}

/* List Border Colors */
.Magnet-List-Left-border-red{
    border-left: 5px solid #fd0054;
}

/* Lists Shadow */
.Magnet-List-dark-shadow:hover,
.Magnet-List-light-shadow:hover{
    border-top: 1px solid rgba(0,0,0,0.3);
    letter-spacing: 0.25px;
}
.Magnet-List-dark-shadow:hover{
    box-shadow: 0px 3px 2px #111;
}
.Magnet-List-light-shadow:hover{
    box-shadow: 0px 3px 2px #ccc;
}

/* Magnet Text align */
.Magnet-center-text{
    text-align: center;
}
.Magnet-right-text{
    text-align:right
}
.Magnet-left-text{
    text-align:left
}
.Magnet-justify-text{
    text-align:justify
}
.Magnet-justify-all-text{
    text-align:justify-all
}
.Magnet-end-text{
    text-align:end
}

/* Counter Background Color*/
.Magnet-Counter-BGColor-red{
    background-color: #fd0054;
    color: #fff;
}

/* Magnet Floating */
.Magnet-float-left{
    float: left;
}
.Magnet-float-right{
    float:right;
}
.Magnet-float-none{
    float: none;
}


/* Colors */
.Magnet-color-light{
    color: #fff
}
.Magnet-color-dark{
    color: #111
}
.Magnet-color-red{
    color:#fd0054;
}
.Magnet-color-Summer-red{
    color:#ff8080;
}
.Magnet-color-Summer-green{
    color:#32ff6a;
}
.Magnet-color-Summer-blue{
    color:#28c3d4;
}
.Magnet-color-Summer-pink{
    color:#fb3569;
}
.Magnet-color-Summer-orange{
    color:#f05a28;
}
.Magnet-color-Summer-primary{
    color:#498eb9;
}
.Magnet-color-Summer-info{
    color:#11d3bc;
}
.Magnet-color-Summer-dark{
    color:#444444;
}
.Magnet-color-Summer-light{
    color:#fffde1;
}
.Magnet-color-Summer-warning{
    color:#ffed78;
}

/* display */
.Magnet-inline{
    display: inline;
}
.Magnet-block{
    display: block;
}
.Magnet-inline-block{
    display: inline-block;
}
.Magnet-flex{
    display:flex
}
.Magnet-inline-flex{
    display:inline-flex
}
.Magnet-none{
    display:none
}



.GenSuccess{
    color: #28a745 !important;
}

/* 
    ****************************************************************************
    =======              End Of Magnet Framework Classes                 =======
    ****************************************************************************
*/