/*****************************************************************************/
/* wks.css                                         (oid:357, pid:187, ord:0) */
/*****************************************************************************/

/***
 * WKS CSS FRAMEWORK (extend w3.css)
 *
 * ver. 2
 *
 * copyright (c) 2023 by Wks, all rights reserved
 */


/*[REGION 'Aaa']*/

/*[ENDREGION]*/


/***
 * GENERAL
 */
.wks-bor-red {border: 1px solid red;}
.wks-bor-gre {border: 1px solid green;}
.wks-bor-blu {border: 1px solid blue;}

.wks-cursor-pointer{cursor: pointer;}
.wks-rtl{direction: rtl;}
.wks-ltr{direction: ltr;}

.wks-centered {
  /*display: block;*/
  margin-left: auto;
  margin-right: auto;
}
.wks-centered-compact {
  margin-left: auto;
  margin-right: auto;
  width: 0;
}

/*
  usage:
  <div class="torn_container torn_left torn_right">
    <div></div>
    <div>Text text text</div>
   </div>
*/
body{
    /* vars */
    --torn-shadow-offset-x:-2px;
    --torn-shadow-offset-y:2px;
    --torn-shadow-background-color:rgba(0,0,0,0.25);
    --torn-background-color:#f15a2b;
    --torn-left-width:14px;
    --torn-right-width:14px;
    --torn-left-clip-path:polygon(47% 0%, 73% 17%, 20% 33%, 63% 50%, 47% 67%, 33% 83%, 55% 100%, calc(100% + 1px) 100%, calc(100% + 1px) 0%);
    --torn-right-clip-path:polygon(11% 0%, 80% 17%, 88% 33%, 42% 50%, 56% 67%, 57% 83%, 91% 100%, -10% 100%, -10% 0%);
}

.torn_container {
    float:left;
    clear:both;
    margin-bottom:1.2em;
    position:relative;
}
.torn_container>div:first-child {
    margin-left:var(--torn-shadow-offset-x);
    margin-top:var(--torn-shadow-offset-y);
    left:0px;
    top:0px;
    right:calc(0px - var(--torn-shadow-offset-x));
    bottom:calc(0px - var(--torn-shadow-offset-y));
    position:absolute;
    z-index:1;
    filter:blur(var(--torn-shadow-blur));
}
.torn_container>div:nth-child(2), .torn_container>div:nth-child(2)>span{
    vertical-align:middle;
}
.torn_container>div:nth-child(2), .torn_left>div:nth-child(2):before, .torn_right>div:nth-child(2):after{
    background-color:var(--torn-background-color);
}
.torn_container>div:nth-child(2), .torn_container>div:nth-child(2){
    display:inline-block;
    position:relative;
    z-index:2;
    padding:0.4em;
}
.torn_left>div:nth-child(2):before, .torn_left>div:first-child:before{
    content:'';
    position:absolute;
    left:calc(0em - var(--torn-left-width));
    top:0px;
    width:var(--torn-left-width);
    bottom:0px;
    -webkit-clip-path:var(--torn-left-clip-path);
    clip-path:var(--torn-left-clip-path);
}
.torn_container>div:first-child, .torn_left>div:first-child:before, .torn_right>div:first-child:after{
    background-color:var(--torn-shadow-background-color);
}
.torn_right>div:nth-child(2):after, .torn_right>div:first-child:after{
    content:'';
    position:absolute;
    left:100%;
    top:0px;
    right:calc(0px - var(--torn-right-width));
    bottom:0px;
    -webkit-clip-path:var(--torn-right-clip-path);
    clip-path:var(--torn-right-clip-path);
}
.torn_right>div:nth-child(2):after{
    left:calc(100% - 0.5px);
}

/*****************************************************************************/
/* END                    (generated by wks @ 9/11/2025 9:49:24 PM in 31 ms) */
/*****************************************************************************/