.item{
    width:170px;

    float:left;
    text-align:center; 
    background-color:#CCCCFF ;
    border-radius:10px;
    border-bottom: #cccccc medium groove  ;
    padding:2px;
    margin:2px;
    height:fit-content -webkit-fit-content -moz-fit-content;
}
.myLink{
    font: 14px;
    font-weight: bold;
    color: #000066 ;
    text-decoration:none;
    
    display:block; 
    margin-bottom:5px;
}
.myXLink{
    font: 14px;
    font-weight: bold;
    color: #6666FF;
    text-decoration:none;
    
    display:block; 
    margin-bottom:5px;
}
.cat{
    background-color:#F0F0F0 ; 
    text-align:center; 
    color: #000000;
    font-size:14px;
    padding:3px ;
    margin:3px ;
}
.catt{
    text-align:center; 
    padding:1px ;
    margin:1px ;
}
.cattt{
    margin-left:1px ;
}

.effect-1{border: 0; padding: 7px 0; border-bottom: 1px solid #ccc; text-align:center;}
.effect-1:focus {border: 1px; width: 100%; transition: 0.4s; text-align:center; }

.myborder, 
.myborder td{
    border: 1px solid #000033;
    border-collapse: collapse;
    padding:3px !important;
    margin:3px !important;
}

.myUnderLine{
    border-bottom: 1px solid #000033;
    border-collapse: collapse;
    padding:3px !important;
    margin:3px !important;
    background-color:#FFFFFF ;
}

/*--------------------------------------------------------------------*/
:root{
    /* color type A */
    --line_color : #00135C ;
    --back_color : #000033  ;

    /* color type B */
    /* --line_color : #1b1919 ;
    --back_color : #E9ECFF  ; */

    /* color type C */
    /* --line_color : #00135C ;
    --back_color : #DEFFFA  ; */
}

.but{
    position : relative ;
    z-index : 0 ;
    width : 240px ;
    height : 56px ;
    text-decoration : none ;
    font-size : 14px ; 
    font-weight : bold ;
    color : var(--line_color) ;
    transition : all .3s ease ;
}
.but__text{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 100% ;
    height : 100% ;
}
.but::before,
.but::after,
.but__text::before,
.but__text::after{
    content : '' ;
    position : absolute ;
    height : 3px ;
    border-radius : 2px ;
    background : var(--line_color) ;
    transition : all .5s ease ;
}
.but::before{
    top : 0 ;
    left : 54px ;
    width : calc( 100% - 56px * 2 - 16px ) ;
}
.but::after{
    top : 0 ;
    right : 54px ;
    width : 8px ;
}
.but__text::before{
    bottom : 0 ;
    right : 54px ;
    width : calc( 100% - 56px * 2 - 16px ) ;
}
.but__text::after{
    bottom : 0 ;
    left : 54px ;
    width : 8px ;
}
.but__line{
    position : absolute ;
    top : 0 ;
    width : 56px ;
    height : 100% ;
    overflow : hidden ;
}
.but__line::before{
    content : '' ;
    position : absolute ;
    top : 0 ;
    width : 150% ;
    height : 100% ;
    box-sizing : border-box ;
    border-radius : 300px ;
    border : solid 3px var(--line_color) ;
}
.but__line:nth-child(1),
.but__line:nth-child(1)::before{
    left : 0 ;
}
.but__line:nth-child(2),
.but__line:nth-child(2)::before{
    right : 0 ;
}

.but:hover::before,
.but:hover .but__text::before{
    width : 8px ;
}
.but:hover::after,
.but:hover .but__text::after{
    width : calc( 100% - 56px * 2 - 16px ) ;
}
.but__drow1,
.but__drow2{
    position : absolute ;
    z-index : -1 ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
}
.but__drow1{
    top : -16px ;
    left : 40px ;
    width : 32px ;
    height : 0;
    transform : rotate( 30deg ) ;
}
.but__drow2{
    top : 44px ;
    left : 77px ;
    width : 32px ;
    height : 0 ;
    transform : rotate(-127deg ) ;
}
.but__drow1::before,
.but__drow1::after,
.but__drow2::before,
.but__drow2::after{
    content : '' ;
    position : absolute ;
}
.but__drow1::before{
    bottom : 0 ;
    left : 0 ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( -60deg ) ;
}
.but__drow1::after{
    top : -10px ;
    left : 45px ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( 69deg ) ;
}
.but__drow2::before{
    bottom : 0 ;
    left : 0 ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( -146deg ) ;
}
.but__drow2::after{
    bottom : 26px ;
    left : -40px ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( -262deg ) ;
}
.but__drow1,
.but__drow1::before,
.but__drow1::after,
.but__drow2,
.but__drow2::before,
.but__drow2::after{
    background : var( --back_color ) ;
}
.but:hover .but__drow1{
    animation : drow1 ease-in .06s ;
    animation-fill-mode : forwards ;
}
.but:hover .but__drow1::before{
    animation : drow2 linear .08s .06s ;
    animation-fill-mode : forwards ;
}
.but:hover .but__drow1::after{
    animation : drow3 linear .03s .14s ;
    animation-fill-mode : forwards ;
}
.but:hover .but__drow2{
    animation : drow4 linear .06s .2s ;
    animation-fill-mode : forwards ;
}
.but:hover .but__drow2::before{
    animation : drow3 linear .03s .26s ;
    animation-fill-mode : forwards ;
}
.but:hover .but__drow2::after{
    animation : drow5 linear .06s .32s ;
    animation-fill-mode : forwards ;
}
@keyframes drow1{
    0%   { height : 0 ; }
    100% { height : 100px ; }
}
@keyframes drow2{
    0%   { width : 0 ; opacity : 0 ;}
    10%  { opacity : 0 ;}
    11%  { opacity : 1 ;}
    100% { width : 120px ; }
}
@keyframes drow3{
    0%   { width : 0 ; }
    100% { width : 80px ; }
}
@keyframes drow4{
    0%   { height : 0 ; }
    100% { height : 120px ; }
}
@keyframes drow5{
    0%   { width : 0 ; }
    100% { width : 124px ; }
}


.containerr{
    height : 60px ;
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
}



/*--------------------------------------------------------------------*/
.btn-outline-infox {
  color: #ccc;
  border-color: #ccc;
}
.btn-outline-infox:hover {
  color: #ccc;
  background-color: #69a1fa;
  border-color: #ccc;
}
.btn-check:focus + .btn-outline-infox, .btn-outline-infox:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}
.btn-check:checked + .btn-outline-infox, .btn-check:active + .btn-outline-infox, .btn-outline-infox:active, .btn-outline-infox.active, .btn-outline-infox.dropdown-toggle.show {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}
.btn-check:checked + .btn-outline-infox:focus, .btn-check:active + .btn-outline-infox:focus, .btn-outline-infox:active:focus, .btn-outline-infox.active:focus, .btn-outline-infox.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}
.btn-outline-infox:disabled, .btn-outline-infox.disabled {
  color: #0dcaf0;
  background-color: transparent;
}