/* modal theater */

    .modal-global-wrapper {
        height: 43px;
        position: relative;
        color: #ecb42a;
        margin-bottom: 0px;
    }

    .modal-global-button {
        position: absolute;
        top: 5px;
        right: 11px;
        font-size: 36px;
    }
    .modalExample{
    }
    .modal-content-wr{
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
    }
/* modal theater */


/* selectn */

.selectn:hover{
    border-color: #28de42;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0px 0px 17px rgb(149, 193, 31);
}
.selectn{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url(/r/mc/cssi/webselect.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 19px;
    outline: none;
    border-color: #3AAA35;
    height: 29px;
    padding-left: 4px;
}
/* selectn END */
/*uinputNumber*/

.inputNumber[type="number"] {
    position: relative;
    border-radius: 5px;
    border: 1px solid;
    border-color: #9ab9c0;
    height: 17px;
    padding: 6px;
    /* border-radius: 3px; */
}

.inputNumber:hover{
}
.inputNumber:focus{
    outline: none;
    border-color: #9ab9c0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0px 0px 17px rgb(154, 185, 192);
}




.inputNumber[class~="small"] {max-width: 38px;}

.inputNumber[class~="middle"] {
max-width: 48px;
}

.inputNumber[class~="big"] {
max-width: 68px;
}


/*uinputNumber*/

/*input*/

.inputblank{
    margin-bottom: 6px;
    display: inline-block;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #e0ebfe;
    border-radius: 4px;
    outline: none;
}
.cinputerror{
    background-color: #f7dfdf !important;
    background-image: none;
    border: 1px solid #ffb3b3;
}
.inputblank:focus{outline: none;border-color: #4285f4;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0px 0px 17px #4285f4;}
.ipSmall{max-width: 82px !important;}

/*input end*/


/*groupbox*/
.groupPadding_0{
    padding: 13PX;
}
.groupboxc{
    /* border: 1px solid rgba(224, 235, 254, 0.57); */
    margin-bottom: 17px;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background-color: #fff;
    margin: 20px;
    border-top: 3px solid #3c8dbc;
}

.groupbox{
    border: none;
    position: relative;
    border-radius: 5px;
    background-color: #ffffff;
}

.groupboxTitlebg{
    /* position: absolute; */
    left: 19px;
    top: -12px;
    padding-left: 36px;
    max-height: 31px;
    padding-right: 5px;
    text-align: left;
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;
    min-height: 38px;
}

.groupboxTitle{
    font-size: 18px;
    overflow: hidden;
    color: #4285f4;
    font-family: 'Montserrat', sans-serif;
    background-color: white;
}

@media screen and (max-width: 1000px){
    .groupboxTitle {
        font-size: 20px;
    }
}
@media screen and (max-width: 400px){
    .groupboxTitle {
        font-size: 15px;
    }
    .groupboxTitlebg {
    top: -8px;
    }
}



.groupboxBody{
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 10px);
    margin-bottom: 2px;
    padding: 6px;
    padding-top: 7px;
    color: #000;
}
.groupPadding_1{

}
.groupPadding_2{

}
.groupPadding_3{padding: 15px;}

.gtight{
    min-height: 17px;
}
.gtight .groupboxBody{
    overflow: hidden;
    display: none;
}
.gtight .groupboxBody .groupboxTitlebg{visibility: hidden;}
.gexpanded{
    
}
.groupboxbuttonUpdown{
    display: inline-block;
    position: absolute;
    left: 8px;
    top: 5px;
    text-align: center;
    z-index: 1;
    width: 16px;
    color: #ffffff;
    border-radius: 5px;
    height: 15px;
    cursor: pointer;
    font-size: 17px;
    overflow: hidden;
    background-color: #4285f4;
}

.groupboxbuttonUpdown .fa-sort-desc{
        margin-top: -5px;
}

.groupboxbuttonUpdown .fa-sort-asc{
        margin-top: 1px;
}


/*groupbox end*/

.panelContainer{
    margin: 10px;
    background-color: #7d2323;
    /*border-radius: 5px;*/
    overflow: hidden;
}

.panelHead{
    padding: 5px;
    margin: 0px;
    text-align: left;
    font-weight: bold;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
    border-bottom: solid 1px #9ab9c0;
    color: #047BA4;
    font-size: 20px;
}

.panelBody{
    padding: 10px;
    border-radius: 5px;
}
.inbmax{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

/*tableBody*/






.table_light_multiple{}
.table_light_multiple tr td table thead{
    display: none;
}

.table_light_multiple tr:first-child td table thead{
    display: table-header-group;
}
.table_lightHead{
    text-align: left;
}
.table_light{
    border-spacing: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.table_light thead tr th{
    color: #FFFFFF;
    font-weight: bold;
    padding: 9px;
    border-bottom: solid 1px #4285f4;
    border-left: solid 1px #4285f4;
    border-top: solid 1px #4285f4;
    background-color: #4285f4;
    text-align: left;
}
.table_light thead tr th:last-child{
border-right: solid 1px #C8E2FF;
}
  .responsiveheadText{
    display: none;
  }
.table_light tbody tr td:last-child{border-right: solid 0px #e7ece0;}

.table_light tbody tr td{
    border-bottom: solid 1px #edf4fe;
    padding: 3px 7px;
    vertical-align: middle;
    text-align: left;
    color: #666;
    border-left: solid 0px rgb(237, 244, 254);
}

.table_light .fa{
    color: #e11414;
    font-size: 14px;
}

.table_light thead tr th .fa{
    color: #ffffff;
    font-size: 13px;
}




.table_light tbody tr:hover>td{
        background-color: rgb(245, 244, 237);
        /* border-left: solid 1px rgb(245, 228, 202); */
}
.table_light tr:nth-child(even) {background: #f7faff;}
.table_light tr:nth-child(odd) { background: #fff}


/*responsive*/





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



 .panelHead{
        width: 90%;
    }

    /*oldCSS*/
/*.table_light td:before{
    position: absolute;
    top: 4px;
    left: 0px;
    width: 30%;
    border-right: 1px solid #C8E2FF;
    padding-right: 6px;
  
    color: #aaa;
    text-align: right;
    font-size: 0.9em;
    font-style: italic;
}
.table_light td{
    position: relative;
    padding-left: 35% !important;
    text-align: left !important;
    line-height: 2em !important;
    font-size: 1.15em !important;
    white-space: pre-wrap;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: block;
}
.table_light tr{
    border: 1px solid #C8E2FF;
    -webkit-box-shadow: #EAEDEF 0 2px 0 0;
    box-shadow: #EAEDEF 0 2px 0 0;
    width: 100%;
    margin-bottom: 6px;
    display: block;
}
.table_light thead{
    display: none;
}*/
/*oldCSS END*/



/*newCSS*/
.table_light td:before, .table_light .table_lightHead th:before{
    position: absolute;
    top: 6px;
    left: 0px;
    width: 30%;
    height: calc(100% - 12px);
    padding-right: 6px;
    /* white-space: nowrap; */
    font-weight: bold;
    text-align: right;
    font-size: 9px;
    /* font-style: italic; */
}

.table_light td,.table_light .table_lightHead th{
    position: relative;
    padding-left: 35% !important;
    text-align: left !important;
    /* line-height: 2em !important; */
    font-size: 1.15em !important;
    /* white-space: pre-wrap; */
    /* overflow: hidden; */
    min-height: 20px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: block;
}

.table_light tr{
    width: 100%;
    margin-bottom: 6px;
    display: block;
}

.table_light thead:not(.table_lightHead){
     display: none !important; 
}

/*newCSS END*/

.table_light_responsive_head_small td{
    padding-left: 35% !important;
}

.table_light_responsive_head_small td:before, .table_light_responsive_head_small .table_lightHead th:before
{
    width: 15%;
    text-align: left;
}



}
/*responsive*/



/*tableBody*/

/*buttons1*/

.buttons1:hover:not([disabled="disabled"]){
    -webkit-box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.5);
    color: #fff;
    border: solid 0px rgb(155, 14, 24);
    background: linear-gradient(#F38749,#F38749);
}
.buttons1:active{
    -webkit-box-shadow: inset 0 3px 5px rgba(34, 38, 41, 0.475);
    box-shadow: inset 0 3px 5px rgba(34, 38, 41, 0.54);
    color: #fff;
    border: solid 0px #F38749;
    background: linear-gradient(#F38749,#F38749);
}
  
.buttonCenter{
        display: block !important;
    max-width: 162px;
    margin-left: auto;
    margin-right: auto;
}

.buttons1{
    background-color: #4285f4 !important;
    border: solid 0px rgb(0, 0, 0);
    /* box-shadow: inset 0 3px 5px rgba(224, 245, 167, 0.48); */
    text-decoration: none;
    color: #363A41;

/*gradient*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2f759f+0,115781+100 */
     /* Old browsers */
     /* FF3.6+ */
     /* Chrome,Safari4+ */
     /* Chrome10+,Safari5.1+ */
     /* Opera 11.10+ */
     /* IE10+ */
     /* W3C */
     /* IE6-9 */

/*gradient*/
    border: solid 0px;
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.buttons1:disabled {
    background-color: #e5e5e5 !important;
    border: solid 1px #d5d6d6;
    color: #ccc;
    text-shadow: 0px 0px 0px rgba(223, 239, 248, 0);
    box-shadow: inset 0 0px 0px rgba(0,171,231,.0);
    cursor: default;
}
/*buttons1*/


/*ulList1*/
.ullight li a:hover{
    color: #F9FDFF;
    background-color: rgb(0, 0, 0);
    cursor: pointer;
    border-radius: 6px 3px 15px 3px;
}

.ullight li a{color: #000000;display: block;text-decoration: none;padding: 10px;font-weight: normal;max-width: 276px;word-wrap: break-word;text-align: center;/*border-bottom: solid 1px rgba(56,144,184,1);*/}

.ullight li:nth-child(odd) a:hover{
    background-color: rgba(100,100,100,1);
}

.ullight li:nth-child(even) a:hover{
    background-color: rgb(128, 102, 25);
}

.ullight li{
    display: inline-block;
    /* padding: 10px; */
    position: relative;
    margin-left: -4px;
    background-color: #FFFFFF;
    /* background-color: #45A2DB; */
    /* background: linear-gradient(rgb(245, 245, 245), rgb(234, 234, 234)); */
    /* border-left: solid 1px #D8D8D8; */
}
.ullight{
    display: block;
    border-bottom: solid 1px #FFFFFF;
    /* box-shadow: 0 3px 5px rgba(0, 0, 0, .3); */
    background-color: #FFFFFF;
    z-index: 1;
}
.ullight li ul li a{
    min-width: 120px;
}
.ullight li ul li{
        display: block;
}
.ullight li:hover > ul{
    display: block;
    position: absolute;
    left: 3px;
    /* border: 1px solid rgba(0, 0, 0, .15); */
    border-radius: 3px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    border-left: solid 5px #206690;
    border-bottom: solid 5px #125278;
}

.ullight li ul li:hover > ul{

}
.ullight li ul li:hover > ul{
display: block;
  position: absolute;
    left: 100%;
    top: 0px;
    z-index: 1;
}

.ullight li ul{
    display: none;
}
.ullightMenu > span:first-child{ 
display: none;
}


/*ulListResponsive*/
@media screen and (max-width: 1000px){
.ullight li a{
	    max-width: 100%;
}
.ullight li {
	display: block;
}
.ullight li:hover ul {
    width: 91%;
    position: initial;
    margin-bottom: 0px;
    margin-left: 10px;
}



.ullight li:hover ul li>a {
	/*color: #f00;*/
}
.ullight li ul li:hover ul li>a {
	/*color: #0f0;*/
}

.ullight li ul li:hover > ul {
	    position: initial;
}

.ullightMenu > span:first-child{

    display: block;
    width: 29px;
    padding: 7px;
    border-radius: 4px;
    margin-left: auto;
    margin-right: 11px;
      background: linear-gradient(rgb(47, 117, 159),rgb(17, 87, 129));
    border: solid 1px rgba(20,90,132,1);
    cursor: pointer;
    float: right;
  

}


.ullightMenu > ul{

display: none;

}

.ullightMenu:hover > span{ 
	/*display: none;*/
}
.ullightMenu:hover{ 
	/*background-color:inherit;*/
}

.ullightMenu:hover > ul{ 
display: block;

}
.ulLightLine{
	    width: 100%;
    height: 4px;
    margin-top: 3px;
    background-color: #FFF;
    border-radius: 3px;
    margin-bottom: 3px;
}
.ullightMenu{
    text-align: center;
    background-color: #FFFFFF;
    padding: 6px;
    border-radius: 4px;
    position: relative;
    height: 40px;
}
.ullight {
    display: none;
}


.ullightMenuActive{
-webkit-box-shadow: inset 0 3px 5px rgba(34, 38, 41, 0.475);
    box-shadow: inset 0 3px 5px rgba(34, 38, 41, 0.475);
    background: linear-gradient(rgb(17, 87, 129),rgb(17, 87, 129)); 
}

/*MENUTOP*/
.ullight_top{
position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;

    z-index: 1;
}
.ullight_top > .ullightMenu{
   border-radius: 0px !important;
}
.pageHeader{
    margin-top: 52px;
}
/*MENUTOP*/


.ullightarrowuright{
    background: #FFF;
    border: solid 0px #000;
    border-radius: 0px;
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(-20deg);
    height: 8px;
    width: 48px;
    border-radius: 10px;
    position: absolute;
    display: block;
    left: 0px;
    top: 22px;
}
.ullightarrowuleft{
background: #FFF;
    border: solid 0px #000;
    border-radius: 0px;
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(20deg);
    right: 0px;
    height: 8px;
    top: 22px;
    width: 48px;
    display: block;
    position: absolute;
    border-radius: 10px;
}
.ullightBarDown{
    top: 0px;
    width: 88px;
    display: none;
    height: 52px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
/*Responsive mobile End*/
}

@media screen and (min-width: 1000px){
.ullight {
    display: block !important;
}
}
/*ulListResponsive*/




/*ulList1*/



/* print start */
@media print{
    .panelHead{
        font-size: 12px;
            border-bottom: solid 0px #000;
            padding: 0px;
    }
    .noprint{
        display: none !important;
    }


    .table_light th{ 
        font-size:9px;
        border-left: solid 0px !important;
        border-top: solid 0px !important;
        border-bottom: solid 1px #000 !important;
        padding: 0px !important;
        text-align: center;
    }
    .table_light td{ 
        font-size:9px;
        /*border-left: solid 1px !important;*/
        border-top: solid 0px !important;
        border-bottom: solid 1px #000 !important;
        padding: 0px !important;
        text-align: center;
    }
    .table_light td,th{
        color: #000 !important;
    }


    .table_light th:last-child,td:last-child {
        border-right: solid 0px #000 !important;
        border-bottom: solid 1px #000 !important;
    }

    .table_light tr:last-child td {
        border-bottom: solid 1px #000 !important;
    }

    .table_light_multiple tr td table tr td, .table_light_multiple tr td table th{
        border: solid 0px !important;
    }
    
    .groupboxc{
        padding: 0px !important;
    }
    .groupbox{
        padding: 0px !important;
    }


}


/* print end */


/* panelSoft */
.panelSoftc{
    border: solid 1px;
    border-radius: 5px;
    background-color: #fff;
    margin: 10px;
    overflow: hidden;
}
.panelSoft_heading{
    color: #fff;
    font-size: 17px;
    background-color: #77b12a;
    border-bottom: solid 1px;
    padding: 5px;
}
.panelSoft_body{
    padding: 13px;
}
.ps_c1{
    border-color: #dadada;
}
/* panelSoft */

.theaterClose{
    display: block;
    background-color: #da7a7a;
    width: 18px;
    height: 18px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    position: absolute;
    border-radius: 4px;
    top: -23px;
    right: 0px;
    cursor: pointer;
}

.inputSelectLabel{
    display: inline-block;
    padding: 9px;
    border: solid 1px #e0ebfe;
    border-radius: 4px;
    padding-bottom: 5px;
    background-color: #fff;
    color: #777;
}
.inputSelectLabel select{display: inline-block;border: 1px solid;border-color: #9ab9c0;height: 28px;}
.inputSelectLabelText{
    display: inline-block;
    font-size: 11px;
}
.inputSelectLabelText .fa{
    color: #4285f4;
    font-size: 14px;
}

/* menu_3 */
.menuItem{z-index: 10000;border: solid 1px transparent;display: inline-block;position: relative;padding: 5px;border-bottom: solid 1px rgba(255, 255, 255, 0.24);color: #bbb;}
.menuTitle{display: inline-block;}
.menuItem a{
    color: #fff;
    text-decoration: none;
}
.menuItem .ulList{

}


.menuItem .ulList{border: solid 1px #9ab9c0;display: none;background-color: #fff;border-radius: 0px 5px 5px 5px;padding: 0px;list-style-type: none;min-width: 102px;position: absolute;box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.36);top: calc(100% + 0px);left: -1px;}
.menuItem .ulList li{

}

.menuItem .ulList li a{
    display: block;
    text-decoration: none;
    color: #777;
    height: 23px;
    padding-left: 4px;
    padding-right: 3px;
    line-height: 23px;
}
.menuItem .ulList li a:hover{
    background-color: #F38749;
    color: #fff;
}
.menuItem:hover {
    background-color: #fff;
    color: #777;
    border: solid 1px #99b8bf;
    border-radius: 5px 5px 0px 0px;
}
.menuItem:hover > .ulList{
    display: block;
}
.menuItem:hover > .menuTitle a {
    color: #777;
}

/* menu_3 end */

/* instaMesssages */
.instaMessagec{
    position: fixed;
    display: none;
    bottom: 7px;
    background-color: rgba(180, 215, 228, 0.77);
    min-height: 29px;
    box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.36);
    min-width: 70px;
    left: 7px;
    padding: 10px;
    font-size: 12px;
    border: solid 1px #9ab9c0;
    border-radius: 5px;
    z-index: 100000;
}
.instaMessageTitle{font-weight: bold;color: #F38749;vertical-align: top;}
.instaMessageIcon{
    display: inline-block;
    color: #000;
    font-size: 33px;
    margin-right: 4px;
}
.instaMesssageBody{
    max-width: 198px;
    max-height: 62px;
    overflow: hidden;
}
.instaTitle{
    display: inline-block;
    vertical-align: bottom;
    height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 195px;
    overflow: hidden;
}
/* instaMesssages */


/* navLine */
.pborder {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.nav_lineC{
    display: inline-block;
    border-radius: 5px;
    margin-top: 8px;
    overflow: hidden;
    margin-bottom: 13px;
    margin-top: 13px;
    margin-left: 11px;
}


.nav_lineC a{
    text-decoration: none;
    color: #989898;
    /* border-right: solid 1px #ccc; */
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    font-size: 17px;
    height: 100%;
    background-color: #fff;
    display: block;
    float: left;
    /* height: 35px; */
    line-height: 35px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 22px;
}
.nav_lineC a img{
    width: 27px;
}
.nav_lineC a:hover {
    background-color: #F38749;
    color: #fff;
}
.nav_lineC a:last-child{
    border-right: solid 0px;
    padding-right: 19px;
}
.nav_lineC a:first-child{padding-left: 19px;}
.nav_lineC .anactive{
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.28);
      background-color: #4285f4;
      color: #fff !important;
}

/* navLine */



/* inputLabel */
.inputLabelContainerWidth100{
    width: calc(100% - 21px);
}
.inputLabelContainer{
    border: 1px solid #8d8a8a;
    margin-top: 2px;
    border-radius: 0px;
    margin-bottom: 3px;
    display: inline-block;
    position: relative;
    min-height: 43px;
    background-color: #ffffffbd;
    padding-left: 12px;
    padding-right: 6px;
    padding-bottom: 6px;
    cursor: text;
    transition: all 0.5s ease;
}
.inputLabelPlaceHolder{
    position: absolute;
    left: 11px;
    -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    z-index: 0;
    top: 18px;
    user-select: none;
    color: #212121;
}
.inputLabelInput{
    color: #555;
    border: 0px;
    outline: none;
    background-color: transparent;
    width: 100%;
    z-index: 0;
    box-sizing: content-box !important;
    margin-top: 18px;
}
.inputLabelInput-textarea{
    border: solid 1px #edf4fe;
    border-radius: 5px;
    padding: 10px;
    width: calc(100% - 22px);
    position: relative;
}
.inputLabelInput:disabled{
    cursor: not-allowed;
}
.inputLabelContainerFocus .inputLabelPlaceHolder{transform: scale(.75) translateY(-22px);color: #1a1a1a;left: 0px;}
.inputLabelContainerFocus{
    border-color: #03a9f4;
    background-color: #ffffff;
}
.inputLabelRequeired{
    position: absolute;
    left: 2px;
    bottom: 12px;
    color: #ecb426;
    font-weight: bold;
}
/* inputLabel end */


.table-noborder{
    border-top: solid 1px;
    width: 100%;
    text-align: left;
    margin-top: 5px;
}
/* table-box */
.table-box-wrapper{
    border: solid 1px #cfcfcf;
    border-radius: 5px;
    padding: 10px;
}
.table-box-item{
    width: calc(49% - 0px);
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.table-box-column{margin: 5px;}
/* table-box */


/* label contents */
.label-wrapper{
    margin-bottom: 5px;
}
.label-title{
    width: 25%;
    display: inline-block;
}
.label-content{
    width: 71%;
    display: inline-block;
}
/* label contents */




/* swich button start */

.switchbtnCaption{
    padding:3px;
}
.switchbtnCaption .switchbtn{
    vertical-align: middle;
}

.switchbtnCaption > span{
    vertical-align: middle;
    display: inline-block;
}


.switchbtn {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-bottom: 0px;
}

.switchbtn input {display:none;}

.sliderwbtn {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderwbtn:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderwbtn {
  background-color: #2196F3;
}

input:focus + .sliderwbtn {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliderwbtn:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliderwbtns */
.sliderwbtn.round {
  border-radius: 34px;
}

.sliderwbtn.round:before {
  border-radius: 50%;
}


/* swich button end */